.btn {
  @extend .btn;

  &_in-header {
    padding: 0.1rem 0.5rem;
    line-height: 1;
    background: var(--white);

    &:before {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      content: "";
      background-color: var(--brand-primary);
      -webkit-transform: scale(0, 1);
      -ms-transform: scale(0, 1);
      transform: scale(0, 1);
      -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
      transform-origin: top right;
      -webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
      -moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
      -o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
      transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
      -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
      -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
      -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
      transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
      border-radius: inherit;
    }

    &:hover::before {
      display: block;
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      transform: scale(1, 1);
      -webkit-transform-origin: bottom left;
      -ms-transform-origin: bottom left;
      transform-origin: bottom left;
    }

    .btn__text {
      color: var(--brand-primary);
      text-transform: uppercase;
      font-weight: 600;
      font-size: 16px;
      position: relative;
      z-index: 1;
    }

    i {
      vertical-align: inherit;
      margin-right: 0.4rem;
    }

    &:hover {
      .btn__text {
        color: var(--white);
      }
    }

  }
}

.fixed-header .btn_in-header {
  border-color: var(--brand-primary);
}