/* =========================
   Element Card
   Figma: Element Card.
   Compact vertical icon-label tile, optionally with a Pro badge.
========================= */

@use "../kit-deps" as *;

.element-card {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: $space-4;
  min-width: 104px;
  min-height: 112px;
  padding: $space-5 $space-4;
  border: $border-width-base $border-style-base $neutral-200;
  border-radius: $radius-xl;
  background-color: $neutral-0;
  color: $neutral-900;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color $motion-base $motion-ease,
    border-color $motion-base $motion-ease,
    box-shadow $motion-base $motion-ease;

  &:hover:not(.is-selected):not(:disabled) {
    border-color: rgba($mint-500, 0.5);
    background-color: $mint-50;

    .element-card__icon {
      border-color: rgba($mint-500, 0.25);
      background-color: $mint-100;
      color: $mint-700;
    }
  }

  &:focus-visible {
    @include focus_ring;
    outline-offset: 2px;
  }

  &:disabled,
  &.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &.is-selected {
    border-color: $mint-500;
    background-color: $mint-100;

    .element-card__icon {
      background: linear-gradient(135deg, rgba($mint-500, 0.12), rgba($yellow-400, 0.12));
      border-color: rgba($mint-500, 0.35);
      color: $mint-700;
    }
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: $border-width-base $border-style-base $neutral-100;
    background-color: $mint-50;
    color: $mint-700;

    .vmk-icon,
    .ph {
      width: 28px;
      height: 28px;
    }
  }

  &__label {
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    line-height: $line-height-tight;
    color: currentColor;
  }

  &__badge {
    position: absolute;
    top: $space-2;
    right: $space-2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 20px;
    padding: 0 $space-2;
    border-radius: $radius-full;
    background-color: $yellow-300;
    color: $neutral-900;
    font-size: 11px;
    font-weight: $font-weight-bold;
    line-height: 1;
  }
}