@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$sizes: 's', 'm', 'l';

.functionBadgeWrapper {
  position: absolute;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  z-index: 1;
  top: 0;
  right: 0;

  display: none;

  &[data-visible] {
    display: block;
  }
}

.composition {
  @include styles-tokens-card.composite-var(styles-tokens-card.$card-composition-container);

  box-sizing: border-box;
  height: 100%;
}

.contentWrapper {
  position: relative;
  height: 100%;
}

.card {
  @include styles-tokens-card.composite-var(styles-tokens-card.$card-container);

  position: relative;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  z-index: 0;

  overflow: hidden;
  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  margin: 0;
  padding: 0;

  text-align: left;

  background-color: styles-tokens-card.$sys-neutral-background1-level;
  border: 0;
  outline-color: transparent;

  &:hover {
    .functionBadgeWrapper {
      display: block;
    }
  }

  &[data-outline] {
    @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-s);

    outline-color: styles-tokens-card.$sys-neutral-decor-default;
    outline-width: styles-tokens-card.$border-width-card-container;
  }

  &:hover,
  &:focus-visible {
    --snack-ui-card-background-color: #{styles-tokens-card.$sys-neutral-background2-level};
  }

  &:focus-visible {
    @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-l);

    background-color: styles-tokens-card.$sys-neutral-background2-level;
    outline-color: styles-tokens-card.$sys-primary-accent-default;

    .functionBadgeWrapper {
      display: block;
    }

    .check {
      background-color: styles-tokens-card.$sys-primary-accent-default;
    }
  }

  &:focus-within {
    .functionBadgeWrapper {
      display: block;
    }
  }

  &[data-checked] {
    @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-s);

    outline-color: styles-tokens-card.$sys-primary-decor-activated;
    outline-width: styles-tokens-card.$border-width-card-container;

    &:hover {
      outline-color: styles-tokens-card.$sys-primary-decor-hovered;
      box-shadow: none;
    }

    .contentWrapper::before {
      content: '';

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      opacity: styles-tokens-card.$opacity-a008;
      background-color: styles-tokens-card.$sys-primary-accent-default;
    }

    .check {
      color: styles-tokens-card.$sys-primary-on-accent;
      background-color: styles-tokens-card.$sys-primary-accent-default;
    }
  }

  &[data-checked]:focus-visible {
    @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-l);

    outline-color: styles-tokens-card.$sys-primary-accent-default;

    .check {
      color: styles-tokens-card.$sys-primary-on-accent;
      background-color: styles-tokens-card.$sys-primary-accent-default;
    }
  }

  &[data-disabled] {
    @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-s);

    cursor: not-allowed;

    opacity: styles-tokens-element.$opacity-a048;
    background-color: styles-tokens-card.$sys-neutral-background;
    outline-color: styles-tokens-card.$sys-neutral-decor-default;
    outline-width: styles-tokens-card.$border-width-card-container;

    &[data-checked] {
      .check {
        color: styles-tokens-card.$sys-neutral-on-accent;
        background-color: styles-tokens-card.$sys-neutral-text-disabled;
      }
    }

    * {
      cursor: not-allowed;
    }
  }

  &[data-pointer] {
    * {
      cursor: pointer;
    }

    &[data-outline] {
      &:hover {
        outline-color: styles-tokens-card.$sys-neutral-decor-hovered;
        box-shadow: none;
      }

      &:focus-visible {
        @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-l);

        outline-color: styles-tokens-card.$sys-primary-accent-default;
      }
    }

    &:hover {
      box-shadow: styles-tokens-card.simple-var(
        styles-tokens-card.$theme-variables,
        'box-shadow',
        'elevation',
        'level2'
      );
    }
  }

  &[data-pointer][data-disabled] {
    * {
      cursor: not-allowed;
    }
  }
}

.anchor {
  position: absolute;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  border-radius: styles-tokens-card.$radius-card-container;
}

.body {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;

  width: 100%;

  color: styles-tokens-card.$sys-neutral-text-support;
  text-align: initial;
}

.content {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  box-sizing: border-box;
  max-width: 100%;
  height: 100%;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include styles-tokens-card.composite-var(styles-tokens-card.$card, 'content', $size, 'container');
    }
  }
}

.footer {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}