@use '../../styles/mixins/dimension';

@use '../Icon/Icon.module';

$chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';

.FloatingIconButton {
  $primary-color-map: (
    blue: --color-fill-accent-blue-heavier,
    cobalt: --color-fill-accent-cobalt-heavier,
    red: --color-fill-accent-red-heavier,
    orange: --color-fill-accent-orange-heavier,
    green: --color-fill-accent-green-heavier,
    pink: --color-fill-accent-pink-heavier,
    purple: --color-fill-accent-purple-heavier,
    dark-grey: --color-fill-neutral-heaviest,
    light-grey: --color-fill-neutral-heavier,
  );
  $color-map: (
    blue: --color-text-accent-blue,
    cobalt: --color-text-accent-cobalt,
    red: --color-text-accent-red,
    orange: --color-text-accent-orange,
    green: --color-text-accent-green,
    pink: --color-text-accent-pink,
    purple: --color-text-accent-purple,
    dark-grey: --color-text-neutral-light,
    light-grey: --color-text-neutral,
  );
  $hovered-color-map: (
    blue: --color-text-accent-blue-hovered,
    cobalt: --color-text-accent-cobalt-hovered,
    red: --color-text-accent-red-hovered,
    orange: --color-text-accent-orange-hovered,
    green: --color-text-accent-green-hovered,
    pink: --color-text-accent-pink-hovered,
    purple: --color-text-accent-purple-hovered,
    dark-grey: --color-text-neutral,
    light-grey: --color-icon-neutral-heavy,
  );

  position: relative;

  box-sizing: border-box;

  border-radius: 9999px;
  box-shadow: var(--elevation-2);

  transition: background-color var(--motion-transition-fast);

  /* dimension */
  &:where(.size-xs) {
    @include dimension.square(20px);

    padding: 2px;
  }

  &:where(.size-s) {
    @include dimension.square(24px);

    padding: 4px;
  }

  &:where(.size-m) {
    @include dimension.square(36px);

    padding: 8px;
  }

  &:where(.size-l) {
    @include dimension.square(44px);

    padding: 12px;
  }

  &:where(.size-xl) {
    @include dimension.square(54px);

    padding: 15px;
  }

  /* background-color */
  &:where(.variant-primary) {
    @each $color, $background-color in $primary-color-map {
      &:where(.color-#{'' + $color}) {
        background-color: var(#{$background-color});
      }
    }
  }

  &:where(.variant-secondary) {
    background-color: var(--color-fill-grey);
  }

  /* color */
  /* stylelint-disable-next-line no-duplicate-selectors */
  &:where(.variant-primary) {
    color: var(--color-text-absolute-white);

    &:where(.color-dark-grey) {
      color: var(--color-text-inverse);
    }

    &:where(.color-light-grey) {
      color: var(--color-text-absolute-white);
    }
  }

  /* stylelint-disable-next-line no-duplicate-selectors */
  &:where(.variant-secondary) {
    @each $color, $icon-color in $color-map {
      &:where(.color-#{'' + $color}) {
        color: var(#{$icon-color});
      }
    }
  }

  /* TODO: use v2 token when design is specified */

  /* visual effect on interaction */
  &:where(.active, :hover):where(:not(:disabled)) {
    box-shadow: var(--elevation-3);

    &:where(.variant-primary) {
      @each $color, $background-color in $primary-color-map {
        &:where(.color-#{'' + $color}) {
          background-color: var(#{$background-color}-hovered);
        }
      }
    }

    &:where(.variant-secondary) {
      @each $color, $hovered-color in $hovered-color-map {
        &:where(.color-#{'' + $color}) {
          /* stylelint-disable-next-line bezier/validate-token */
          color: var(#{$hovered-color});
        }
      }
    }
  }

  &:where(.variant-primary.color-blue:focus-visible) {
    outline: 3px solid var(--color-state-action-light);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
  }

  /* internal components */
  & :where(.ButtonContent) {
    display: flex;
    align-items: center;
    justify-content: center;

    &:where(.loading) {
      visibility: hidden;
    }
  }

  & :where(.ButtonLoader) {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    @each $size, $value in Icon.$size-map {
      &:where(.size-#{$size}) {
        & :is(.Loader) {
          @include dimension.square(#{$value}px);
        }
      }
    }
  }
}