// ac-buttons
@mixin ac-button($colorName) {
  background-color: $colorName;
  color: $white-100;
  border: none;

  &:hover {
    @if (type_of($colorName) == "color") {
      background-color: darken($colorName, 9);
    } @else {
      background-color: hsla(var(--hsl-hue), var(--hsl-saturation), calc(var(--hsl-lightness) - 9%), 1);
    }

    // box-shadow: 0px 6px 12px scale-color($color: $colorName, $lightness: 70%);
  }

  &:focus-visible {
    outline: none;
  }

  &.is-light {
    @if (type_of($colorName) == "color") {
      background-color: scale-color($colorName, $lightness: 90%);
    } @else {
      background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.1);
    }

    color: $colorName;

    &.is-border {
      border: 1px solid $colorName;
    }

    &:hover {
      @if (type_of($colorName) == "color") {
        background-color: scale-color($colorName, $lightness: 80%);
      } @else {
        background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.2);
      }
    }
  }

  &.is-outlined {
    background-color: transparent;
    border: 1px solid $colorName;
    color: $colorName;

    &:hover {
      background-color: $colorName;
      color: $white-100;
    }
  }

  &.is-square {
    @if (type_of($colorName) == "color") {
      background-color: scale-color($colorName, $lightness: 80%);
    } @else {
      background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.2);
    }

    color: $colorName;

    &:hover {
      background-color: $colorName;
      color: $white-100;
      box-shadow: none;

      img {
        filter: brightness(100) !important;
      }
    }
  }

  &.is-inverted {
    background-color: $white-100;
    color: $colorName;

    &:hover {
      @if (type_of($colorName) == "color") {
        background-color: scale-color($colorName, $lightness: 80%);
      } @else {
        background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.2);
      }
    }

    &.is-outlined {
      background-color: transparent;
      border: 1px solid $white-100;
      color: $white-100;

      &:hover {
        background-color: $white-100;
        color: $colorName;
      }
    }
  }
}

// ac-play-button
@mixin ac-play-button($colorName) {
  border-color: $colorName;
  color: $colorName;

  &:hover {
    background-color: $colorName;
    color: $white-100;

    @if (type_of($colorName) == "color") {
      box-shadow: 0px 6px 12px scale-color($color: $colorName, $lightness: 70%);
    } @else {
      box-shadow: 0px 6px 12px hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.3);
    }
  }

  &.is-large {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid $colorName;

    @if (type_of($colorName) == "color") {
      background-color: scale-color($colorName, $lightness: 80%);
    } @else {
      background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.2);
    }

    span {
      color: $colorName;
    }

    .ac-play {
      border: 1px solid $colorName;
    }

    &:hover {
      background-color: $colorName;
      box-shadow: none;
      color: $white-100;

      .ac-play {
        border: 1px solid $white-100;
      }

      span {
        color: $white-100;
      }
    }
  }
}

// AC-Switch
@mixin ac-switch($colorName) {
  &:checked {
    & + label {
      &::before {
        background-color: $colorName;
      }
    }
  }
}

@mixin ac-tags($colorName) {
  @if (type_of($colorName) == "color") {
    background-color: scale-color($colorName, $lightness: 85%);
  } @else {
    background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.15);
  }

  border-color: $colorName;
  color: $colorName;
}

// Absulate Shape
@mixin absulate-shape($colorName, $width, $height) {
  position: absolute;
  content: "";
  width: $width;
  height: $height;
  background-color: $colorName;
  left: 0;
  top: 0;
}