@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'mixins/button' as *;
@use 'common/var' as *;

// @include b(checkbox-button) {
//   @include set-component-css-var('checkbox-button', $checkbox-button);
// }

@include b(checkbox-button) {
  position: relative;
  display: block;
  outline: none;

  @include e(inner) {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: getCssVar('color-neutral-2');
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: getCssVar('color-neutral-9');
    -webkit-appearance: none;
    text-align: center;
    outline: none;
    margin: 0;
    position: relative;
    transition: getCssVar('transition-all');
    user-select: none;

    [class*='#{$namespace}-icon'] + span {
      margin-left: 8px;
    }
  }

  &:hover:not(.is-disabled) {
    @include e(inner) {
      cursor: pointer;
      color: getCssVar('color-primary');
      background-color: getCssVar('color-primary-1');
    }
  }

  @include when(checked) {
    @include e(inner) {
      background-color: getCssVar('color-neutral-3');
    }
  }

  @include when(disabled) {
    cursor: not-allowed;

    @include e(inner) {
      color: getCssVar('color-neutral-5');
      background-color: getCssVar('color-neutral-1');
    }
  }

  @include e(original) {
    opacity: 0;
    outline: none;
    position: absolute;
    z-index: -1;

    &:focus-visible {
      & + .#{$namespace}-checkbox-button__inner {
        outline: 2px solid getCssVar('color-primary-2');
        outline-offset: 1px;
      }
    }
  }

  &:first-child {
    .#{$namespace}-checkbox-button__inner {
      border-top-left-radius: getCssVar('border-radius-md');
      border-bottom-left-radius: getCssVar('border-radius-md');
    }
  }

  &:last-child {
    .#{$namespace}-checkbox-button__inner {
      border-top-right-radius: getCssVar('border-radius-md');
      border-bottom-right-radius: getCssVar('border-radius-md');
    }
  }

  @include when(vertical) {
    .#{$namespace}-checkbox-button__inner {
      justify-content: center;
    }

    &:first-child {
      .#{$namespace}-checkbox-button__inner {
        border-top-left-radius: getCssVar('border-radius-md');
        border-top-right-radius: getCssVar('border-radius-md');
        border-bottom-left-radius: 0;
      }
    }

    &:last-child {
      .#{$namespace}-checkbox-button__inner {
        border-top-right-radius: 0;
        border-bottom-left-radius: getCssVar('border-radius-md');
        border-bottom-right-radius: getCssVar('border-radius-md');
      }
    }
  }

  @each $size in (large, small) {
    $sizes: (
      'large': (
        'font-size': 18px,
        'line-height': 24px,
        'padding': 10px 20px,
        'border-radius': getCssVar('border-radius-lg'),
      ),
      'small': (
        'font-size': 12px,
        'line-height': 16px,
        'padding': 6px 12px,
        'border-radius': getCssVar('border-radius-sm'),
      ),
    );

    @include m($size) {
      @include e(inner) {
        font-size: map.get($sizes, $size, 'font-size');
        line-height: map.get($sizes, $size, 'line-height');
        padding: map.get($sizes, $size, 'padding');
      }

      &:first-child {
        @include e(inner) {
          border-top-left-radius: map.get($sizes, $size, 'border-radius');
          border-bottom-left-radius: map.get($sizes, $size, 'border-radius');
        }
      }

      &:last-child {
        @include e(inner) {
          border-top-right-radius: map.get($sizes, $size, 'border-radius');
          border-bottom-right-radius: map.get($sizes, $size, 'border-radius');
        }
      }
    }
  }
}