@charset "UTF-8";

@keyframes loader-opacity {
  from {
    opacity: 0;
  }

  50% {
    opacity: 0.2;
  }

  to {
    opacity: 0.5;
  }
}

@if $enable-buttons == true {
  .button {
    @include text-base-big(700);
    @include interact(background, $brand-green-pea);
    @include button-focus;

    display: inline-block;
    padding: 2rem map_get($mq-container-indents, 'sm');
    border-radius: $border-radius-base;
    background: $brand-turquoise;
    outline: none;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: all $transition-duration-base;
    color: #fff !important;
    text-align: center;

    &:not(.button--secondary) {
      [data-color-type='gazprombank-blue'] & {
        @include interact(background, $brand-gazprom-dark);

        background: $brand-gazprom-blue;
      }

      [data-color-type='vtb'] & {
        @include interact(background, $brand-vtb-blue);

        background: $brand-vtb-red;
      }

      [data-color-type='rfb'] & {
        @include interact(background, $brand-rfb-lightred);

        background: $brand-rfb-red;
      }
    }

    &:hover {
      color: #fff;
    }

    @at-root a#{&} {
      text-decoration: none;
    }

    &:disabled {
      background: $brand-herbal;
      cursor: not-allowed;
      pointer-events: none;
    }

    &.button--small {
      @include text-base(700);

      padding-top: 1.4rem;
      padding-bottom: 1.4rem;

      &.button--two-row {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
        height: map-get($mq-indents, 'sm') * 2;
      }
    }

    &.button--block {
      display: block;
      width: 100%;
    }

    &.button--fixed-width {
      @include mq(sx) {
        width: 24.4rem;
      }
    }

    &.button--green-icon {
      & .icon {
        fill: $brand-turquoise;
      }
    }

    &.button--with-icon {
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        margin-right: map_get($mq-container-indents, 'sx') * 0.25;
      }
    }

    &.button--align-start {
      justify-content: flex-start;
    }

    &.button--no-margin-icon-mobile {
      .icon {
        @include mq-custom(max, 1196px) {
          margin: 0;
        }
      }
    }

    &.button--secondary {
      @include interact(background, #ffffff);
      @include interact(box-shadow, #{0px 12px 12px rgba(0, 0, 0, 0.12)});
      @include button-focus-secondary;

      border: 1px solid rgba(0, 0, 0, 0.07);
      background: #fff;
      color: $color-base !important;

      &:disabled {
        background: #ffffff;
        color: $color-lightest !important;

        &.button--secondary .icon {
          fill: $color-lightest;
        }
      }

      [data-color-type='vtb'] & {
        @include interact(background, $color-lightest-secondary);

        background: #fff;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.11), 0 0 0 1px rgba(0, 0, 0, 0.09);
        color: $color-base !important;
      }

      &:hover {
        color: $color-base;
      }
    }

    &.button--no-border-right {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: none;
    }

    &.button--no-border-radius-left {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &.button--phone {
      .icon {
        @include size(1.6rem);

        margin-right: 1rem;
        fill: #fff;
      }
    }

    &.button--back {
      position: relative;
      padding-left: 4rem;

      @include mq(sm) {
        @include interact(background, transparent);
        @include interact(color, $brand-turquoise);
        @include text-minimal(400);

        padding: 0;
        padding-left: 2rem;
        box-shadow: none;
        line-height: 1;
      }

      &::before {
        @include size(1.15rem, 2rem);
        position: absolute;
        top: 50%;
        left: 2rem;
        transform: translateY(-50%) rotate(-180deg);
        content: '';
        background: {
          position: 50%;
          size: contain;
          image: url('#{$assets-path}/img/icons/arrow-black.svg');
          repeat: no-repeat;
        }

        @include mq(sm) {
          left: 0;
        }
      }
    }

    &.button--ellipsis {
      @include ellipsis();
    }

    &.button--transparent {
      border: 1px solid rgba(153, 153, 153, 0.25);
      background: #ffffff;
      box-shadow: none;
      color: $color-base !important;

      &:hover,
      &:focus,
      &.hover {
        background: $color-lightest-minimal;
        border-color: $color-lightest-minimal;
      }

      &.button--xxl {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }
    }

    &.button--no-color {
      border: 2px solid $color-lightest-border2;
      background: transparent;
      box-shadow: none;
      color: $color-base !important;

      &:hover,
      &:focus,
      &.hover {
        background: $color-lightest-minimal;
      }
    }

    &.button--no-border {
      border: none;
    }

    &.button--adaptive {
      @include text-base(700);

      padding-top: 1.4rem;
      padding-bottom: 1.4rem;

      @include mq(lg) {
        @include text-base-big(700);

        padding-top: 2rem;
        padding-bottom: 2rem;
      }
    }

    &.button--text-align-left {
      justify-content: flex-start !important;
      text-align: left !important;
    }

    &.button--no-margin-icon-mobile {
      & .icon {
        @include mq-custom(max, 767px) {
          margin: 0;
        }
      }
    }

    &.button--two-row {
      padding-top: 0.8rem;
      padding-bottom: 0.8rem;
      height: map-get($mq-container-indents, 'sx');
      white-space: normal;
    }

    &[data-size-sm] {
      @include font(1.3rem, 1.6rem);

      padding: 0.8rem 3.6rem;
    }

    &[data-size-md-large] {
      @include mq(md) {
        font-size: 1.8rem;
        line-height: 1.33;
      }
    }

    &[data-circle] {
      border-radius: 2.4rem;
    }

    &[data-size-xl] {
      padding: 1.6rem 2rem;
    }

    &[data-promo] {
      @include font(1.8rem, 2.4rem);

      padding: 1.2rem 6.4rem;
      min-width: 22.4rem;
      border-radius: 2.4rem;
      font-weight: 900;
    }

    &[data-callback] {
      display: inline-flex;
      justify-content: center;
      align-items: center;

      > .icon {
        @include size(1.6rem);

        margin-right: 0.8rem;
        fill: #fff;
      }
    }

    &[data-fixed='true'] {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      transform: rotateZ(0);
      z-index: 99;
      border-radius: 0;
    }

    // old

    &[data-sm-fixed] {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      transform: rotateZ(0);
      display: none;
      border-radius: 0;

      &.is-active {
        display: block;
      }

      @include mq(sx) {
        display: none !important; // overrides js
      }
    }

    &__loader {
      @include size(2rem);

      fill: #ffffff;

      .button-link &,
      .button--secondary & {
        fill: $color-base;
      }
    }

    &__loader-path {
      &:first-child {
        animation: 1.2s loader-opacity infinite;
      }

      &:nth-child(2) {
        animation: 1.2s loader-opacity 0.1s infinite;
      }

      &:nth-child(3) {
        animation: 1.2s loader-opacity 0.2s infinite;
      }

      &:nth-child(4) {
        animation: 1.2s loader-opacity 0.3s infinite;
      }

      &:nth-child(5) {
        animation: 1.2s loader-opacity 0.4s infinite;
      }

      &:nth-child(6) {
        animation: 1.2s loader-opacity 0.5s infinite;
      }

      &:nth-child(7) {
        animation: 1.2s loader-opacity 0.6s infinite;
      }

      &:nth-child(8) {
        animation: 1.2s loader-opacity 0.7s infinite;
      }

      &:nth-child(9) {
        animation: 1.2s loader-opacity 0.8s infinite;
      }

      &:nth-child(10) {
        animation: 1.2s loader-opacity 0.9s infinite;
      }

      &:nth-child(11) {
        animation: 1.2s loader-opacity 1s infinite;
      }

      &:nth-child(12) {
        animation: 1.2s loader-opacity 1.1s infinite;
      }
    }
  }

  .button-old {
    display: inline-block;
    padding: 0 20px;
    height: 44px;
    vertical-align: middle;
    border: 1px solid #0a9b87;
    background-color: #3dd0bc;
    background-image: -webkit-linear-gradient(top, #3dd0bc, #00bfa5);
    background-image: linear-gradient(to bottom, #3dd0bc, #00bfa5);
    box-shadow: inset 0 1px 0 #3ccfad;
    font-size: 14px;
    line-height: 43px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    color: #fff;
    text-shadow: 0 1px 0 #12a985;
    letter-spacing: 2px;
    text-align: center;

    &:hover {
      background-color: #04c6ab;
      background-image: -webkit-linear-gradient(top, #04c6ab, #0a9b87);
      background-image: linear-gradient(to bottom, #04c6ab, #0a9b87);
      opacity: 1;
      border-color: #087768;
    }
  }

  .close-button {
    @include size(2rem);
    @include interact(fill, $brand-turquoise, 'hover .icon');

    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    z-index: 4;
    font-size: 0;
    cursor: pointer;

    @include mq(md) {
      top: 3.2rem;
      right: 3.2rem;
    }

    &--sm-position {
      @include mq(md) {
        top: 1.6rem;
        right: 1.6rem;
      }
    }

    &--middle-size {
      @include size(1.6rem);
    }

    &:focus {
      outline: none;
      text-decoration: underline;
    }

    > .icon {
      @include size(100%);

      fill: $color-base;

      &.white {
        fill: #fff;
      }
    }
  }

  .back-button {
    @include interact(text-decoration, none);
    @include interact(background-color, rgba(0, 0, 0, 0.05));
    @include interact(border-color, rgba(0, 0, 0, 0.04));

    position: absolute;
    top: 1.2rem;
    left: 0.8rem;
    display: flex !important;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-radius: $border-radius-min;
    border: 1px solid transparent;
    outline: none;
    cursor: pointer;
    transition: all $transition-duration-base-min;

    @include mq(md) {
      top: 2.8rem;
      left: 2.4rem;
    }

    .icon {
      @include size(1.5rem, 2rem);
      transform: rotate(180deg);

      margin-right: 0.8rem;
      fill: $color-base;
    }

    > span {
      @include text-small(400);
    }

    &--clear {
      .icon {
        @include size(0.88rem);

        margin-left: 0.8rem;
      }
    }

    &--static {
      position: static;
      display: inline-flex !important;
      margin-bottom: map-get($mq-container-indents, 'sx') * 0.5;
      margin-left: -0.8rem;
    }

    &.not-mobile {
      @include mq(sm) {
        display: none !important;
      }
    }
  }

  @keyframes rotate-download-close {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .icon-link-list {
    &--relative {
      position: relative;
    }

    &--index {
      z-index: 2;
    }

    .tooltip &,
    .popup-tooltip-block & {
      &:not(:first-child) {
        margin-top: map_get($mq-container-indents, 'sx') * 0.25;
      }
    }

    > li {
      line-height: 0;

      &:not(:last-child) {
        margin-bottom: 0.8rem;
      }

      > .icon-link {
        > .load-close,
        > .icon {
          margin-right: 0.8rem;
        }

        .load-close {
          margin: 0 auto;

          @include mq(md) {
            margin-right: 1.2rem;
          }
        }

        > span,
        &::after {
          display: block;
        }

        &[data-report] {
          padding-left: 0;

          > .icon {
            position: relative;
            top: 0;
            padding-left: 0;
          }
        }
      }

      &.is-mobile {
        display: none;

        @include mq-custom(max, 983px) {
          display: block;
        }
      }
    }
  }

  .icon-link {
    @include interact(text-decoration, underline, 'hover span');

    display: inline-flex;
    align-items: center;
    line-height: 1.5;

    &:not(:last-child) {
      margin-right: map-get($mq-container-indents, 'sx') * 0.25;
    }

    > .icon,
    > span {
      display: block;
    }

    > .icon {
      margin-right: 0.8rem;
    }

    > span,
    &::after {
      @include text-base(400);
    }

    &[data-download] {
      position: relative;

      > .icon {
        @include size(1.3rem, 1.2rem);

        fill: $color-light;

        &.is-load {
          display: none;
        }
      }

      > .load-icon,
      > .load-close {
        display: none;
      }

      > .load-icon {
        @include size(2.4rem);

        position: absolute;
        top: 50%;
        left: -0.55rem;

        @include mq(md) {
          left: -0.74rem;
          transform: translateY(-50%);
        }
      }

      > .load-close {
        @include size(0.9rem);

        margin-right: 1.2rem;
      }

      &[data-content] {
        &::after {
          content: attr(data-content);
        }
      }

      &.is-load {
        > .icon {
          display: none;
        }

        > .load-icon,
        > .load-close {
          display: block;
        }

        > .load-icon {
          animation: rotate 1s linear infinite;
        }

        &::after {
          content: 'Отменить';
        }
      }
    }

    &[data-add-to-favourites] {
      > .icon {
        @include size(1.24rem, 1.2rem);

        fill: $brand-grapefruit;
      }

      &.is-active {
        > .icon {
          fill: $brand-reddish;
        }
      }
    }

    &[data-add] {
      > .icon {
        @include size(1.2rem);

        fill: $color-light;
      }
    }

    &[data-report] {
      position: relative;
      padding-left: 1.8rem;

      > .icon {
        @include size(1rem, 1.2rem);

        position: absolute;
        top: 0.6rem;
        left: 0;
      }
    }

    &[data-share] {
      > .icon {
        @include size(1.1rem, 1.2rem);

        fill: $color-base;
      }
    }
  }

  .open-still {
    @include size(4.6rem, 3.2rem);

    position: relative;
    padding: 0.3rem 0.8rem;
    border-radius: $border-radius-min;
    border: 1px solid transparent;

    &.is-active,
    &:hover {
      border-color: $color-lightest-minimal;
    }

    &.is-current {
      color: $color-base;
      border-color: $color-base;
      pointer-events: none;
    }

    > span {
      @include size(0.4rem);

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: block;
      border-radius: 50%;
      background: $color-base;

      &::before,
      &::after {
        @include size(100%);

        position: absolute;
        top: 0;
        left: 0;
        display: block;
        border-radius: 50%;
        background: $color-base;
        content: '';
      }

      &::before {
        transform: translateX(-200%);
      }

      &::after {
        transform: translateX(200%);
      }
    }
  }

  .box-for-button {
    padding: map_get($mq-container-indents, 'sx') * 0.5 map_get($mq-container-indents, 'sx') * 0.5 0;
    text-align: center;

    &--padding-top {
      padding-right: 0;
      padding-left: 0;
    }
  }

  .button-group {
    border-radius: $border-radius-base;

    &:not(:first-child) {
      margin-top: map_get($mq-container-indents, 'sx') * 0.25;
    }

    &:not(:last-child) {
      margin-bottom: map_get($mq-container-indents, 'sx') * 0.25;
    }

    .button {
      position: relative;
      width: 100%;
      border-radius: 0;

      &:first-child {
        border-top-right-radius: $border-radius-base;
        border-top-left-radius: $border-radius-base;
      }

      &:last-child {
        border-bottom-left-radius: $border-radius-base;
        border-bottom-right-radius: $border-radius-base;
      }

      &:not(:first-child) {
        border-top: none;
      }

      @for $i from 1 through 20 {
        &:nth-child(#{$i}) {
          z-index: 21 - $i !important;
        }
      }
    }

    &--columns {
      display: flex;
      flex-wrap: wrap;

      .button {
        min-width: 50%;
        max-width: 50%;

        &:hover,
        &:focus {
          z-index: 1;
        }

        &:first-child {
          border-top-right-radius: 0;
        }

        &:nth-child(2) {
          border-top: 1px solid rgba(0, 0, 0, 0.07);
          border-top-right-radius: $border-radius-base;
        }

        &:nth-child(even) {
          border-left: none;
        }

        &:nth-last-child(2) {
          border-bottom-left-radius: $border-radius-base;
        }

        &:last-child {
          border-bottom-left-radius: 0;
        }
      }
    }
  }

  .button-link {
    @include text-base(500);
    @include interact(text-decoration, underline);

    cursor: pointer;

    &.is-disabled,
    &:disabled {
      color: $color-lightest;
      cursor: not-allowed;
      pointer-events: none;

      .icon {
        fill: $color-lightest;
      }
    }

    &--big {
      @include text-base-big(700);
    }

    &--medium {
      font-size: 1.6rem;
    }

    &--small {
      @include text-small(500);
    }

    .icon {
      margin-right: map_get($mq-container-indents, 'sx') * 0.125;
    }
  }
}