@use '@style/theme/index.scss' as theme;
@use 'sass:map';
@use 'sass:meta';
@use 'sass:string';
@use '@components/selectable-card/style/token.scss' as *;
@use '@components/tag/style/token.scss' as tag-token;

$selectable-card-prefix-cls: string.unquote('#{theme.$prefix}-selectable-card');
$colors:
  'red', 'orangered', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'sdblue', 'purple',
  'pinkpurple', 'magenta', 'gray';

@function tag-token-var($name) {
  @return map.get(meta.module-variables('tag-token'), $name);
}

.#{$selectable-card-prefix-cls} {
  position: relative;
  box-sizing: border-box;
  color: $selectable-card-color-value;
  background: $selectable-card-color-bg;
  border: $selectable-card-border-width solid $selectable-card-color-border;
  border-radius: $selectable-card-border-radius;
  cursor: pointer;
  transition:
    color theme.$transition-duration-2 theme.$transition-timing-function-standard,
    background-color theme.$transition-duration-2 theme.$transition-timing-function-standard,
    border-color theme.$transition-duration-2 theme.$transition-timing-function-standard,
    box-shadow theme.$transition-duration-2 theme.$transition-timing-function-standard;

  &::after {
    position: absolute;
    background: transparent;
    border-radius: inherit;
    transition: background theme.$transition-duration-2 theme.$transition-timing-function-standard;
    content: '';
    pointer-events: none;
    inset: 0;
  }

  @media (hover: hover) {
    &:not(&--disabled):hover::after {
      background: $selectable-card-overlay-hover;
    }
  }

  &:not(&--disabled):active::after {
    background: $selectable-card-overlay-active;
  }

  &:has(&-input:focus-visible) {
    outline: 2px solid $selectable-card-color-focus;
    outline-offset: 2px;
  }

  &-body {
    display: flex;
    min-width: 0;
  }

  &-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }

  &-figure {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: var(--sd-selectable-card-accent);
    font-size: 2em;
  }

  &-title {
    color: $selectable-card-color-title;
    font-size: theme.$font-size-body-3;
  }

  &-value {
    color: $selectable-card-color-value;
    font-weight: theme.$font-weight-600;
    line-height: 1.25;
  }

  &-description,
  &-default {
    color: $selectable-card-color-description;
    font-size: theme.$font-size-body-2;
    line-height: theme.$line-height-base;
  }

  &-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: theme.$spacing-4;
  }

  &--layout-horizontal &-body {
    flex-direction: row;
    align-items: center;
  }

  &--layout-vertical &-body {
    flex-direction: column;
  }

  &--align-center &-body,
  &--align-center &-content {
    align-items: center;
    text-align: center;
  }

  @each $size, $padding, $gap,
    $value-size
      in (
        (
          small,
          $selectable-card-size-small-padding,
          $selectable-card-size-small-gap,
          $selectable-card-size-small-value
        ),
        (
          medium,
          $selectable-card-size-medium-padding,
          $selectable-card-size-medium-gap,
          $selectable-card-size-medium-value
        ),
        (
          large,
          $selectable-card-size-large-padding,
          $selectable-card-size-large-gap,
          $selectable-card-size-large-value
        )
      )
  {
    &--size-#{$size} {
      padding: $padding;
    }

    &--size-#{$size} &-body,
    &--size-#{$size} &-content {
      gap: $gap;
    }

    &--size-#{$size} &-value {
      font-size: $value-size;
    }
  }

  @each $color in $colors {
    &--color-#{$color} {
      --sd-selectable-card-accent: #{tag-token-var('tag-#{$color}-color-text')};
      --sd-selectable-card-soft-bg: #{tag-token-var('tag-#{$color}-color-bg')};
      --sd-selectable-card-border: #{tag-token-var('tag-#{$color}-bordered-color-border')};
    }
  }

  &--selected {
    border-color: var(--sd-selectable-card-border);
    box-shadow: inset 0 0 0 2px var(--sd-selectable-card-border);
  }

  &--selected#{&}--soft {
    color: var(--sd-selectable-card-accent);
    background: var(--sd-selectable-card-soft-bg);
  }

  &--selected#{&}--filled {
    color: #fff;
    background: var(--sd-selectable-card-border);
  }

  &--selected#{&}--filled &-title,
  &--selected#{&}--filled &-value,
  &--selected#{&}--filled &-description,
  &--selected#{&}--filled &-default,
  &--selected#{&}--filled &-figure {
    color: inherit;
  }

  &--disabled {
    cursor: not-allowed;
    opacity: $selectable-card-disabled-opacity;
  }

  &-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
  }
}