// В этом файле должны быть стили для БЭМ-блока field-file, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

.field-file {

  $block-name:                &; // #{$block-name}__element

  display: block;
  margin-bottom: $typo-margin-vertical;

  &__name {
    @include field-name;
  }

  &__input-wrap {
    display: block;
    position: relative;
  }

  &__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;

    &:active ~ .field-file__name-text,
    &:focus ~ .field-file__name-text {
      @include field-focus;
    }
  }

  &__name-text {
    display: flex;
    align-items: baseline;
    position: relative;
    width: 100%;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    background-color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    overflow: hidden;

    @at-root input:disabled ~ & {
      background: $gray-lighter;
      cursor: not-allowed;
    }

    &:before {
      content: attr(data-button-text);
      display: block;
      background-color: $gray-lightest;
      border-right: 1px solid $border-color;
      margin-right: $field-padding-horizontal;
      line-height: $line-height;
      padding: $field-padding-vertical  $field-padding-horizontal;
      border-top-left-radius: $border-radius;
      border-bottom-left-radius: $border-radius;
    }

    &:hover,
    &:focus {

      &:before {
        background-color: darken($gray-lightest, 10%); // как у обычных кнопок
      }
    }
  }

  &__help-text {
    @include field-help-text;
  }



  &--error {

    #{$block-name}__name,
    #{$block-name}__name-text,
    #{$block-name}__input,
    #{$block-name}__help-text {
      color: $color-danger;
    }

    #{$block-name}__name-text {
      border-color: $color-danger;
      background-color: lighten($color-danger, 35%);
    }
  }
}
