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

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

  .sf-checkbox {
    height: 1px;
    width: 1px;
    position: absolute;
    bottom: 20%;
    left: 40%;
    opacity: 0;
  }

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

    &:hover {
      .sf-checkbox-ripple {
        background: $cbox-checked-ripple-bgcolor;
      }
    }
    &:active, &:focus {
      .sf-checkbox-ripple {
        box-shadow: $cbox-keyboard-pressed-box-shadow;
        .sf-checkbox-icons {
          border-color: $cbox-pressed-focus-border-color;
        }
      }
    }
    &:has(.sf-checkbox:focus-visible) {
      .sf-checkbox-ripple {
        box-shadow: $cbox-keyboard-focus-box-shadow;
        .sf-checkbox-icons {
          border-color: $cbox-pressed-focus-border-color;
        }
      }
    }
    &.sf-disabled {
      opacity: $cbox-disabled-opacity;
    }
  }

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

    svg {
      width: $cbox-icon-small-size;
      height: $cbox-icon-small-size;
    }
  }

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

    svg {
      width: $cbox-icon-large-size;
      height: $cbox-icon-large-size;
    }
  }

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

    svg {
      width: $cbox-icon-size;
      height: $cbox-icon-size;
    }
  }

  .sf-checkbox-icons {
    border: $cbox-border;
    border-radius: $cbox-border-radius;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background-color: $cbox-unchecked-bg-color;
  }

  .sf-checkbox-icons:not(.sf-error):not(.sf-checkbox-checked) {
    color: $cbox-unchecked-color;
  }

  .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;

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

    &.sf-left {
      flex-direction: row;
    }

    &.sf-top {
      align-items: flex-start;
      flex-direction: column;
    }

    &.sf-bottom {
      align-items: flex-start;
      flex-direction: column-reverse;
    }
    
    .sf-label {
      font-weight: $cbox-label-font-weight;
    }
  }

  .sf-checkbox-ripple {
    border-radius: $cbox-ripple-radius;
    position: relative;
  }

  .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;
  }

  .sf-checkbox-wrapper {
    @at-root {
      @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);

            &:hover {
              background: map.get($colors, hover-focus-bg);
              border-color: map.get($colors, hover-focus-bg);
            }

            &:active {
              background: map.get($colors, pressed-bg);
              border-color: map.get($colors, pressed-bg);
            }
          }

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

              .sf-checkbox-icons {
                border-color: map.get($colors, pressed-focus-border-color);
              }
            }
          }
          &:has(.sf-checkbox:focus-visible) {
            .sf-checkbox-ripple {
              box-shadow: map.get($colors, focus-box-shadow);

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

              .sf-checkbox-icons {
                border-color: map.get($colors, pressed-focus-border-color);
              }
            }
          }
        }
      }
    }
  }

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

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

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