@use "sass:map";
@use 'theme-variables' as *;

@mixin position-ripple() {
  left: auto;
  right: 0%;
  transform: translate(25%, -50%);
}

@include export-module('checkbox-layout') {

  .sf-checkbox {
    height: 1px;
    width: 1px;
    position: absolute;
  }

  .sf-checkbox-wrapper {
    user-select: none;
    display: flex;

    &:hover {
      .sf-checkbox-ripple {
        background: $cbox-checked-ripple-bgcolor;
      }
    }
    
    &.sf-focus {
      .sf-checkbox-ripple {
        box-shadow: $cbox-keyboard-focus-box-shadow;
      }
    }
  }

  .sf-checkbox-frame-sm {
    font-size: $cbox-frame-sm-font-size;

    svg {
      font-size: $cbox-icon-small-size;
    }
  }

  .sf-checkbox-frame-la {
    font-size: $cbox-frame-la-font-size ;

    svg {
      font-size: $cbox-icon-large-size;
    }
  }

  .sf-checkbox-frame-me {
    font-size: $cbox-frame-me-font-size ;

    svg {
      font-size: $cbox-icon-size;
    }
  }

  .sf-checkbox-icons {
    border: $cbox-border;
    border-radius: $cbox-border-radius;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: inherit;
    height: $cbox-frame-dimension;
    width: $cbox-frame-dimension;
    flex: none;
  }

  .sf-checkbox-checked,
  .sf-checkbox-indeterminate {
    background-color: $cbox-checkmark-bgcolor;
    border-color: $cbox-checkmark-bgcolor;
    color: $cbox-checkmark-color;
  }

  .sf-checkbox-label {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    color: $cbox-color;
    gap: $cbox-margin;
    width: 100%;

    &.sf-left,
    &.sf-right {
      justify-content: flex-end;
    }

    &.sf-right {
      flex-direction: row-reverse;
    }

    &.sf-top {
      align-items: flex-start;
      flex-direction: column;
      line-height: $cbox-vertical-line-height;
    }

    &.sf-bottom {
      align-items: flex-start;
      flex-direction: column-reverse;
      line-height: $cbox-vertical-line-height;
    }
  }

  .sf-checkbox-ripple {
    border-radius: $radius-full;
    position: absolute;
    z-index: 5;
    pointer-events: none;
  }

  .sf-checkbox-horizontal {
    top: 50%;
    left: 0%;
    transform: translate(-22%, -50%);
  }

  .sf-checkbox-vertical {
    transform: translate(-25%, 0%);
  }

  .sf-left .sf-checkbox-ripple:not(.sf-rtl *) {
    @include position-ripple();
  }

  .sf-checkbox-ripple-me {
    padding: $cbox-ripple-padding;
  }

  .sf-checkbox-ripple-sm {
    padding: $cbox-ripple-small-padding;
  }

  .sf-checkbox-ripple-la {
    padding: $cbox-ripple-large-padding;
    transform: translate(-25%, -50%);
  }

  .sf-rtl .sf-right .sf-checkbox-ripple {
    @include position-ripple();
  }

  .sf-rtl .sf-checkbox-vertical {
    transform: translate(25%, 0%);
  }

  .sf-checkbox-wrapper {
    @at-root {
      &.sf-rtl {
        &:not(.sf-top):not(.sf-bottom) {
          flex-direction: row-reverse;
        }

        flex-direction: column-reverse;
      }

      @each $variant, $colors in $cbox-variants {
        &.sf-#{$variant} {

          .sf-checkbox-indeterminate,
          .sf-checkbox-checked {
            background: map.get($colors, bg);
            border-color: map.get($colors, bg);
            color: map.get($colors, color);
          }

          &:focus,
          &:hover {
            .sf-checkbox-ripple {
              background: map.get($colors, ripple);
            }
          }
        }
      }
    }
  }

  .sf-checkbox-small {
    line-height: $cbox-sm-line-height;
    gap: $cbox-sm-gap;
    .sf-font-size-sm{
    font-size: $cbox-label-sm-font-size;
    }
  }

  .sf-checkbox-medium{
    line-height: $cbox-me-line-height;
    gap: $cbox-me-gap;
    .sf-font-size-sm{
    font-size: $cbox-label-me-font-size;
    }
  }

  .sf-checkbox-large {
    line-height: $cbox-la-line-height;
    gap: $cbox-la-gap;
    .sf-font-size-base{
    font-size: $cbox-label-la-font-size;
    }
  }
}