@use 'sass:map';
@use '@mezzanine-ui/system/palette';
@use '@mezzanine-ui/system/radius';
@use '@mezzanine-ui/system/spacing';
@use '@mezzanine-ui/system/effect';
@use '@mezzanine-ui/system/transition';
@use '@mezzanine-ui/system/typography';
@use './input-check' as *;

.#{$prefix} {
  --#{$prefix}-control-size: #{spacing.semantic-variable(size, element, base-fixed)};
  --#{$prefix}-color: #{palette.semantic-variable('border', brand)};
  --#{$prefix}-checked-hover-color: #{palette.semantic-variable('background', brand-strong)};

  display: inline-flex;
  align-items: flex-start;
  gap: spacing.semantic-variable(gap, tight);
  transition: transition.standard(background-color, fast), transition.standard(color, fast);
  padding: spacing.semantic-variable(padding, vertical, calm) 0;
  will-change: background-color, color;
  cursor: pointer;
  box-sizing: border-box;

  &--main, &--sub {
    --#{$prefix}-segmented-border-radius: #{radius.variable(tiny)};
  }

  &--minor {
    --#{$prefix}-segmented-border-radius: #{radius.variable(base)};
  }

  &--sub, &--minor {
    padding: spacing.semantic-variable(padding, vertical, tight) 0;
  }

  &--segmented {
    padding: 0;
  }

  input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    z-index: 1;
  }

  &__control {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin: 1px;
    width: var(--#{$prefix}-control-size);
    height: var(--#{$prefix}-control-size);
    padding: spacing.semantic-variable(padding, vertical, micro)
      spacing.semantic-variable(padding, horizontal, micro);
    transition: transition.standard(background-color, fast);
    will-change: background-color;
    box-sizing: border-box;

    &--focused,
    &:has(input:focus-visible) {
      &::before {
        content: '';
        position: absolute;
        width: var(--#{$prefix}-control-size);
        height: var(--#{$prefix}-control-size);
        border: 1px solid var(--#{$prefix}-color);
        top: 0;
        left: 0;
        border-radius: 50%;
        box-sizing: border-box;
      }
    }

    &--segmented {
      width: auto;
      height: auto;
      padding: 0;
    }

    &--segmented.#{$prefix}__control--focused,
    &--segmented:has(input:focus-visible) {
      background-color: palette.semantic-variable('background', base);
      border-radius: var(--#{$prefix}-segmented-border-radius);
      box-shadow: effect.variable(focus, primary);

      &::before {
        display: none;
      }
    }
  }

  &__label {
    @include typography.semantic-variable(label-primary);

    display: inline-flex;
    flex-direction: column;
    color: palette.semantic-variable(text, neutral-solid);
    gap: spacing.semantic-variable(gap, tight);

    &:empty {
      display: none;
    }
  }

  &__hint {
    @include typography.semantic-variable(caption);

    color: palette.semantic-variable(text, neutral);
  }

  &--with-label {
    background-color: transparent;
  }

  &--error {
    --#{$prefix}-color: #{palette.semantic-variable('border', error)};
    --#{$prefix}-checked-hover-color: #{palette.semantic-variable('background', error-strong)};
  }

  &--disabled {
    --#{$prefix}-color: #{palette.semantic-variable(border, neutral-light)};

    background-color: transparent;
    cursor: default;
    pointer-events: none;
  }
}

.#{$group-prefix} {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 0 spacing.semantic-variable(gap, comfort);

  &--main, &--sub {
    --#{$group-prefix}-segmented-vertical-padding: #{spacing.semantic-variable(padding, vertical, micro)};
    --#{$group-prefix}-segmented-horizontal-padding: #{spacing.semantic-variable(padding, horizontal, micro)};
    --#{$group-prefix}-segmented-background: #{palette.semantic-variable(background, neutral-subtle)};
  }

  &--minor {
    --#{$group-prefix}-segmented-vertical-padding: #{spacing.semantic-variable(padding, vertical, none)};
    --#{$group-prefix}-segmented-horizontal-padding: #{spacing.semantic-variable(padding, horizontal, none)};
    --#{$group-prefix}-segmented-background: transparent;
  }

  &--vertical {
    grid-auto-flow: row;
  }

  &--segmented {
    gap: spacing.semantic-variable(gap, tight);
    border-radius: radius.variable(base);
    background-color: var(--#{$group-prefix}-segmented-background);
    padding: var(--#{$group-prefix}-segmented-vertical-padding) var(--#{$group-prefix}-segmented-horizontal-padding);
  }
}