///
/// @group GradientButton
/// @access private
/// @author Keith Choison <keith@tize.io>
/// @since 1.1.5
///

@use 'config/colors';
@use 'config/fonts';
@use 'functions/color';
@use 'mixins/aria';
@use 'mixins/font';
@use 'mixins/position';
@use 'mixins/spacing';
@use 'mixins/transition';

.container {
  position: relative;
  @include spacing.padding-xy($x: 35px, $y: 12px);
  @include font.apply(fonts.$primary, ( font-weight: 300 ));
  font-size: 14px;
  color: colors.$transparent;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(75deg, #4A9AC7 5%, #F148CC 95%) 0 0 / 200% 100%;
  background-clip: text;
  border-radius: 100px;
  @include transition.apply(color, box-shadow);

  &.light {
    box-shadow: (
      0 0 1px color.alpha(colors.$black, 0.4),
      0 0 4px color.alpha(colors.$gray-dark, 0.24),
    );

    &.mina {
      box-shadow: (
        0 0 1px color.alpha(#770629, 0.4),
        0 0 4px color.alpha(#D76D8E, 0.24),
      );
    }
  }

  &.dark {
    box-shadow: (
      0 0 1px color.alpha(colors.$white, 0.4),
      0 0 12px color.alpha(colors.$black, 0.4),
    );
  }

  &.mina {
    background: linear-gradient(65deg, #E94489 2%, #F8C8C5 98%) 0 0 / 200% 100%;
    background-clip: text;
  }

  &::before {
    content: '';
    @include position.absolute-fill;
    background: linear-gradient(75deg, #4A9AC7 5%, #F148CC 95%) 0 0 / 200% 100%;
    border-radius: 100px;
    opacity: 0;
    @include transition.apply((background-position, 1.5s), opacity);
    z-index: -1;
  }

  &.mina::before {
    background: linear-gradient(65deg, #E94489 2%, #F8C8C5 98%) 0 0 / 200% 100%;
  }

  @include aria.outline($radius: 100px);

  &:hover {
    color: colors.$white;
    background-clip: border-box;

    &::before {
      background-position: 100% 0;
      opacity: 0.65;
    }

    &.light::after {
      @include aria.outline-hover;
    }

    &.dark::after {
      @include aria.outline-hover($color: colors.$white);
    }
  }

  &:focus {
    &.light::after, &.dark::after {
      @include aria.outline-show;
    }
  }

  span, strong {
    display: inline-block;
  }

  strong {
    font-weight: 600;
  }
}
