Button: Tag Selector

.btn {
  $symbol: map-get($icons, 'chevron-right');

  @include typography-level('button');

  position: relative;
  display: inline-block;
  max-width: 100%;
  height: 4.4rem;
  margin: 0;
  padding: 0 5rem 0 0;
  overflow: hidden;
  outline: 0 none;
  border: 0 none;
  background-color: $transparent;
  background-position-x: 100%;
  background-size: 220% 100%;
  vertical-align: middle;
  line-height: 4.4rem;
  color: var(--btn-color, #{$primary});
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;

  &,
  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
  }

  &,
  &::after,
  &::before {
    background-repeat: no-repeat;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(100% - 4.4rem);
    width: 0;
    height: 4.4rem;
    border: 0 var(--btn-color, #{$primary}) solid;
    line-height: inherit;
  }

  &::after {
    @include icon-content-extended($symbol, inline-block);

    position: absolute;
    top: 0;
    right: 0;
    width: 4.4rem;
    height: 4.4rem;
    background-image: linear-gradient(
      to right,
      var(
        --btn-foreground,
        unquote(
          '#{$black percentage(1/3)},
      #{$transparent percentage(1/3)},
      #{$transparent percentage(2/3)},
      #{$transparent percentage(2/3)}'
        )
      )
    );
    background-position-x: 98%;
    background-size: 330% 100%;
    line-height: inherit;
    color: var(--btn-color, #{$primary});
    text-align: center;
  }

  &:hover,
  &:focus {
    background-position-x: 0;
    color: var(--btn-hover-color, #{$primary});
    transition: background-position 0.2s linear;

    &::before {
      width: 4.4rem;
      border-width: 0.2rem;
      border-color: var(--btn-hover-border);
      transition: width 0.2s linear, border-right-width 0s linear 0.2s;
    }

    &::after {
      background-position-x: 50%;
      color: var(--btn-hover-icon, #{$primary});
      transition: background-position 0.2s linear;
    }
  }

  &:active {
    color: var(--btn-active-color, #{$black});

    &::before {
      border-color: var(--btn-active-border);
    }

    &::after {
      background-position-x: 0;
      color: var(--btn-active-icon, #{$white});
    }
  }

  &.-cta,
  &.-secondary {
    padding-left: 1.2rem;

    &::before {
      border: 0 none;
    }
  }

  &.-cta {
    background-image: linear-gradient(to right, var(--btn-cta-background, unquote('#{$black} 50%, #{$secondary} 50%')));
    color: var(--btn-cta-color, #{$white});

    &::after {
      background-image: linear-gradient(
        to right,
        var(--btn-cta-foreground, unquote('#{$transparent} 50%, #{$secondary} 50%'))
      );
      background-position-x: 96%;
      background-size: 220% 100%;
      color: var(--btn-cta-color, #{$white});
    }

    &:hover,
    &:focus {
      color: var(--btn-cta-hover-color, #{$white});

      &::after {
        color: var(--btn-cta-hover-icon, #{$white});
      }
    }

    &:active {
      color: var(--btn-cta-active-color, #{$white});

      &::after {
        background-position-x: 0;
        color: var(--btn-cta-active-icon, #{$white});
      }
    }

    &.cart {
      background-image: linear-gradient(to right, var(--btn-cta-background, unquote('#{$black} 50%, #{$primary} 50%')));

      &::after {
        background-image: linear-gradient(to right, var(--btn-cta-foreground, unquote('#{$transparent} 50%, #{$primary} 50%')));
      }
    }
  }

  &.-secondary {
    background-image: linear-gradient(
      to right,
      var(--btn-secondary-background, unquote('#{$black} 50%, #{$gray-darker} 50%'))
    );
    color: var(--btn-secondary-color, #{$white});

    &::after {
      background-image: linear-gradient(
        to right,
        var(--btn-secondary-foreground, unquote('#{$transparent} 50%, #{$gray-darker} 50%'))
      );
      background-position-x: 96%;
      background-size: 220% 100%;
      color: var(--btn-secondary-icon, #{$white});
    }

    &:hover,
    &:focus {
      color: var(--btn-secondary-hover-color, #{$white});

      &::after {
        color: var(--btn-secondary-hover-icon, #{$white});
      }
    }

    &:active {
      background-color: $black;
      color: var(--btn-secondary-active-color, #{$white});

      &::after {
        background-position-x: 0;
        color: var(--btn-secondary-active-icon, #{$white});
      }
    }
  }

  &.-icon-only {
    padding-right: 4.4rem;
    background: $transparent;

    &::before {
      border: 0 none;
    }

    &::after {
      top: 0;
      color: var(--btn-icon-only-icon, #{$primary});
    }

    &:hover {
      background: $transparent;
      color: var(--btn-icon-only-hover-icon, #{$primary});

      &::after {
        background: $transparent;
        background-position-x: 96%;
        color: var(--btn-icon-only-hover-icon, #{$black});
      }
    }

    &:active::after {
      background-color: $transparent;
      background-position-x: 96%;
      color: var(--btn-icon-only-active-icon, #{$black});
    }

    &.-fill {
      &::after {
        background-image: linear-gradient(
          to right,
          var(--btn-icon-only-fill-foreground, unquote('#{$black} 50%, #{$secondary} 50%'))
        );
        background-position-x: 96%;
        background-size: 220% 100%;
        color: var(--btn-icon-only-fill-icon, #{$white});
      }

      &:hover::after {
        background-position-x: 0;
        color: var(--btn-icon-only-fill-hover-icon, #{$white});
      }

      &:active::after {
        color: var(--btn-icon-only-fill-active-icon, #{$white});
      }
    }
  }

  &.-tag-selector {
    @include typography-level('heading-3');

    margin: 0.6rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid $black;
    color: $black;

    &:not(.-active):hover {
      border-color: $primary;
      background-color: $primary;
      color: $white;
    }

    &.-active {
      border-color: $secondary;
      background-color: $secondary;
      color: $white;
    }

    &::before,
    &::after {
      content: none;
    }
  }

  &:disabled,
  &.-disabled {
    &,
    &:hover,
    &:active {
      /* stylelint-disable declaration-no-important */
      background: $gray-light !important;
      color: $white !important;

      &::after {
        background: $gray-light !important;
        color: $white !important;
      }
      /* stylelint-enable */
    }
  }

  &.-w-full {
    width: 100%;
    max-width: 100%;
  }

  @each $name, $icon in $icons {
    &.-#{$name} {
      @include icon-content($icon, false);
    }
  }

  &.-arrow {
    padding: 0 1rem 0 5rem;
    background-color: var(--btn-background-arrow, $white);
    background-image: linear-gradient(to right, $black 33.33333%, transparent 33.33333%, transparent 66.66667%, transparent 66.66667%);
    background-position-x: -90%;
    background-size: 330% 100%;
    color: var(--btn-arrow-text-color, $black);

    &:hover {
      background-position-x: 2.5rem;
      color: $white;
      transition: background-position 0.2s linear, color 0.2s linear;
    }

    &::after {
      $symbol: map-get($icons, 'arrow-right-top');
      @include icon-content-extended($symbol, inline-block);

      left: 0;
      width: 4.4rem;
      background-color: var(--btn-background-arrow, $white);
      background-image: none;
      font-size: 2rem;
      line-height: 4.4rem;
      color: var(--btn-arrow-color, $secondary);
    }

    &:hover::before,
    &:focus::before,
    &:active::before {
      display: none;
    }

    &:hover::before,
    &:focus::before,
    &:active::before,
    &:hover::after,
    &:focus::after,
    &:active::after {
      border: 0;
    }

    &.-arrow-middle {
      &::after {
        $symbol: map-get($icons, 'arrow-right-middle');
        content: unquote("'#{$symbol}'");
      }
    }

    &.-arrow-bottom {
      &::after {
        $symbol: map-get($icons, 'arrow-right-bottom');
        content: unquote("'#{$symbol}'");
      }
    }
  }
}

// stylelint-disable selector-no-qualifying-type
input {
  &.btn {
    &[type='button'],
    &[type='reset'],
    &[type='submit'] {
      padding-right: 0;
    }
  }

  &.-cta,
  &.-secondary {
    &[type='button'],
    &[type='reset'],
    &[type='submit'] {
      padding-right: 1.2rem;
    }
  }
}
// stylelint-enable