//
// Copyright 2022 Google LLC
// SPDX-License-Identifier: Apache-2.0
//

// go/keep-sorted start
@use './slider';
// go/keep-sorted end

@media (forced-colors: active) {
  :host {
    $container-color: CanvasText; // white
    $color: Canvas; // black
    $disabled-color: GrayText;
    @include slider.theme(
      (
        active-track-color: $container-color,
        disabled-active-track-color: $disabled-color,
        disabled-active-track-opacity: 1,
        disabled-handle-color: $disabled-color,
        disabled-inactive-track-color: $disabled-color,
        disabled-inactive-track-opacity: 1,
        focus-handle-color: $container-color,
        handle-color: $container-color,
        handle-shadow-color: $color,
        hover-handle-color: $container-color,
        hover-state-layer-color: $color,
        hover-state-layer-opacity: 1,
        inactive-track-color: $color,
        label-container-color: $color,
        label-text-color: $container-color,
        pressed-handle-color: $container-color,
        pressed-state-layer-color: $color,
        pressed-state-layer-opacity: 1,
        with-overlap-handle-outline-color: $container-color,
      )
    );
  }

  .label,
  .label::before {
    border: var(--_with-overlap-handle-outline-color) solid
      var(--_with-overlap-handle-outline-width);
  }

  // inactive track
  :host(:not([disabled])) .track::before {
    border: 1px solid var(--_active-track-color);
  }

  // inactive-track
  .tickmarks::before {
    // A url must be used when forced-colors is active as it's the only value
    // that is respected. The radial-gradient is not displayed. This is a
    // stop-gap solution so ticks are displayed at all when forced-colors is
    // active.
    // Note:
    // * The SVG has no viewBox which lets the svg take its dimensions from
    //   background-size.
    // * The fill is set directly. Using currentColor does not seem to work,
    //   hence the duplication of background-image.
    // * This approach does not respect tick sizes. Instead they will always be
    //   1px wide. This is a limitation of using the url, as I'm not sure how
    //   to pass in a custom property to change the `r` attribute.
    // TODO(b/298051946): Tick marks cannot be resized in HCM
    // stylelint-disable function-url-quotes -- SVG data URI
    // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='CanvasText'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E");
    // stylelint-enable function-url-quotes
  }

  // active-track
  .tickmarks::after {
    // See inactive-track documentation for background-image.
    // stylelint-disable function-url-quotes -- SVG data URI
    // TODO(b/298051946): Tick marks cannot be resized in HCM
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E");
    // stylelint-enable function-url-quotes
  }

  :host([disabled]) .tickmarks::before {
    // TODO(b/298051946): Tick marks cannot be resized in HCM
    // stylelint-disable function-url-quotes -- SVG data URI
    // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E");
    // stylelint-enable function-url-quotes
  }
}