.disabled,
%disabled {
  pointer-events: none;
  cursor: initial;
}

@mixin state-default {
  @extend %cursor-pointer;

  background: transparent;
  border: 0;
  position: relative;
  z-index: 1;
  border-radius: $border-radius-card;
  box-shadow: $shadow-default;
  transition: z-index $transition-duration-default $transition-ease-default,
    box-shadow $transition-duration-default $transition-ease-default;

  &::before,
  &::after {
    @extend %disabled;

    user-select: none;
    padding: 0;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 50%;
    right: 0;
    height: 100%;
    width: 100%;
    border-radius: $border-radius-card;
    transform-origin: center;
    transform: translate(-50%, -50%);
  }

  &::before {
    z-index: -2;
    box-sizing: content-box;
    background-clip: border-box;
    background-image: $fluid-light-diagonal;
    background-repeat: no-repeat;
    background-origin: center;
    opacity: 0;
    transition: padding $transition-duration-default $transition-ease-default,
      opacity $transition-duration-default $transition-ease-default;
  }

  &::after {
    z-index: -1;
    background-clip: content-box;
    background-color: $white;
    transition: padding $transition-duration-default $transition-ease-default,
      border-radius $transition-duration-default $transition-ease-default;
  }

  &:hover,
  &:active {
    @include state-hover;
  }

  &:focus {
    @include state-focus;
  }
}

@mixin state-hover {
  box-shadow: $shadow-hover;

  &::before {
    opacity: 1;
  }

  &::after {
    padding: $spacing-default;
  }
}

@mixin state-focus {
  outline: none;
  box-shadow: none;

  &:hover {
    box-shadow: none;
  }

  &::before {
    opacity: 1;
  }

  &::after,
  &:hover::after {
    padding: calc(#{$spacing-default} / 2);
  }
}

@mixin state-active {
  @include state-default;

  @extend %disabled;

  z-index: 2;
  box-shadow: none;

  &::before {
    opacity: 1;
  }

  &::before,
  &:focus::before {
    padding: $spacing-default;
  }

  &::after {
    border-radius: $border-radius-card / 2;
  }

  &:hover::after {
    border-radius: $border-radius-card;
  }
}

@mixin state-inactive {
  @include state-default;

  @extend %disabled;

  z-index: 1;
  box-shadow: none;

  &::before {
    opacity: 1;
  }

  &::before,
  &:focus::before {
    background-color: $gray-300;
    background-image: none;
  }

  &::after {
    padding: 1px;
  }
}

@mixin state-disabled {
  @include state-inactive;

  &::before,
  &:focus::before {
    background-color: $gray-200;
  }

  & > * {
    color: $gray-300;
    opacity: 0.3;
    transition: opacity $transition-duration-default $transition-ease-default;
  }
}

.state--default,
%state--default {
  @include state-default;
}

.state--hover,
%state--hover {
  @include state-default;
  @include state-hover;
}

.state--focus,
%state--focus {
  @include state-default;
  @include state-focus;
}

.state--active,
%state--active {
  @include state-active;
}

.state--inactive,
%state--inactive {
  @include state-inactive;
}

.state--disabled,
%state--disabled {
  @include state-disabled;
}