@use 'sass:map';
@use '../base/colors';
@use '../base/typography';
@use '../base/opacity';

@mixin mx-slider-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $current-theme: colors.$mx-light;

  @if $is-dark {
    $current-theme: colors.$mx-dark;
  }

  .mdc-slider__thumb {
    //thumb label
    .mdc-slider__value-indicator-container {
      transform: translateX(-50%) rotate(45deg);
      .mdc-slider__value-indicator {
        padding: 0;
        width: 28px;
        height: 28px;
        background-color: map.get($current-theme, primary);
        border-radius: 50% 50% 0 50%;
        opacity: 1;
        &:before {
          display: none;
        }
        &-text {
          width: 28px;
          transform: rotate(-45deg);
        }
      }
    }
  }
}