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

.btn {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  margin: 0;
  border-radius: $border-radius;
  border: 1px solid transparent;
  padding: 14px 20px;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  user-select: none;
  text-align: center;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  color: $color-1;
  font-size: 13px;
  font-family: $font-family;
  background-color: #fff;
  background-image: none;
  cursor: pointer;
  overflow: hidden;
  transition: color $transition-time, background-color $transition-time,
    border-color $transition-time;

  @media (min-width: $screen-xl) {
    padding: 16px 30px;
    font-size: 18px;
  }

  @media (min-width: $screen-xl) and (max-width: ($screen-xxl - 1)) {
    @at-root .form-block__second & {
      padding: 14px 20px;
      min-width: 180px;
      font-size: 16px;
    }
  }

  @media (min-width: $screen-lg) {
    padding: 15px 20px;
    font-size: 14px;
  }

  &:hover,
  &:focus {
    text-decoration: none;
    color: #fff;
    background-color: transparent;
    border-color: #fff;

    svg {
      path {
        stroke: #fff;
      }
    }
  }

  // &:visited {
  //   color: $text-color;
  // }

  &:active,
  &:focus {
    outline: none;
    // @include field-focus;
  }

  svg {
    path {
      transition: stroke $transition-time;
    }
  }

  &--disabled,
  &:disabled {
    opacity: $opacity;
    cursor: not-allowed;
    color: $text-color;
    background-color: $gray-lightest;
    // border-color: $gray-lighter;

    @at-root a.btn--disabled {
      pointer-events: none;
    }
  }

  &--ico {
    display: inline-flex;
    align-items: center;

    svg {
      margin-left: 10px;
      width: auto;
      height: 25px;

      @media (min-width: $screen-xxl) {
        margin-left: 15px;
        height: 32px;
      }

      @media (min-width: $screen-xl) {
      }
    }
  }

  // &__icon {
  //   display: inline-block;
  //   vertical-align: middle;
  // }

  // &--main {
  //   color: #fff;
  //   background-color: $color-main;
  //   // border: 1px solid $color-main;

  //   &:hover,
  //   &:focus {
  //     color: #fff;
  //     background-color: darken($color-main, 10%);
  //     // border-color: darken($color-main, 12%);
  //   }

  //   &--disabled,
  //   &:disabled {
  //     color: #fff;
  //     background-color: $color-main;
  //     // border-color: $color-main;
  //   }
  // }
}
