@use "../../styles/utils";
@use "./variables" as locals;

// Selecting both `-webkit` and `-moz` causes weird behavior.
// Following ways are not working:
// - &::-webkit-slider-thumb, &::-moz-range-thumb {...
// - %thumb-base
@mixin thumb-base {
  @include utils.size(locals.$thumbSize);

  border-radius: var(--cmm-radius-full);
  background: var(--cmm-color-white);
  border: 2px solid var(--cmm-color-primary-emphasis);
  appearance: none;
}

@mixin focus {
  outline: 2px solid var(--cmm-outline-color-primary);
  outline-offset: 2px;
}

@include utils.layer {
  .Block {
    @extend %size-defaults;

    appearance: none;
    height: locals.$trackHeight;
    border-radius: locals.$trackRadius;
    background: var(--cmm-color-primary-soft-bg);
    cursor: pointer;
    outline: none;

    &::-webkit-slider-thumb {
      @include thumb-base;
    }

    &::-moz-range-thumb {
      @include thumb-base;
    }

    &:focus-within::-webkit-slider-thumb {
      @include focus;
    }

    &:focus-within::-moz-range-thumb {
      @include focus;
    }
  }

  %size-defaults {
    #{locals.$trackHeight_name}: 0.4rem;
    #{locals.$thumbSize_name}: 1rem;
  }

  .--sm {
    #{locals.$trackHeight_name}: 0.25rem;
    #{locals.$thumbSize_name}: 0.75rem;
  }

  .--md {
    @extend %size-defaults;
  }

  .--lg {
    #{locals.$trackHeight_name}: 0.6rem;
    #{locals.$thumbSize_name}: 1.25rem;
  }
}
