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

// go/keep-sorted start
@use 'sass:map';
// go/keep-sorted end

@mixin styles($tokens) {
  @layer styles {
    .track {
      position: absolute;
      width: 100%;
      height: 100%;
      box-sizing: border-box;

      border-radius: inherit;

      // Center content
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // Separate node for background/outline colors to support opacity changes.
    .track::before {
      content: '';
      display: flex;
      position: absolute;
      height: 100%;
      width: 100%;
      border-radius: inherit;
      box-sizing: border-box;
      transition-property: opacity, background-color;
      transition-timing-function: linear;
      transition-duration: 67ms;
    }

    .disabled .track {
      background-color: transparent;
      border-color: transparent;
    }

    .disabled .track::before,
    .disabled .track::after {
      transition: none;
      opacity: map.get($tokens, 'disabled-track-opacity');
    }

    .disabled .track::before {
      background-clip: content-box;
    }

    .selected .track::before {
      background-color: map.get($tokens, 'selected-track-color');
    }

    .selected:hover .track::before {
      background-color: map.get($tokens, 'selected-hover-track-color');
    }

    .selected:focus-within .track::before {
      background-color: map.get($tokens, 'selected-focus-track-color');
    }

    .selected:active .track::before {
      background-color: map.get($tokens, 'selected-pressed-track-color');
    }

    .selected.disabled .track {
      background-clip: border-box;
    }

    .selected.disabled .track::before {
      background-color: map.get($tokens, 'disabled-selected-track-color');
    }

    .unselected .track::before {
      background-color: map.get($tokens, 'track-color');
      border-color: map.get($tokens, 'track-outline-color');
      border-style: solid;
      border-width: map.get($tokens, 'track-outline-width');
    }

    .unselected:hover .track::before {
      background-color: map.get($tokens, 'hover-track-color');
      border-color: map.get($tokens, 'hover-track-outline-color');
    }

    .unselected:focus-visible .track::before {
      background-color: map.get($tokens, 'focus-track-color');
      border-color: map.get($tokens, 'focus-track-outline-color');
    }

    .unselected:active .track::before {
      background-color: map.get($tokens, 'pressed-track-color');
      border-color: map.get($tokens, 'pressed-track-outline-color');
    }

    .unselected.disabled .track::before {
      background-color: map.get($tokens, 'disabled-track-color');
      border-color: map.get($tokens, 'disabled-track-outline-color');
    }
  }

  @layer hcm {
    @media (forced-colors: active) {
      .selected .track::before {
        background: ButtonText;
        border-color: ButtonText;
      }

      .disabled .track::before {
        border-color: GrayText;
        opacity: 1;
      }

      .disabled.selected .track::before {
        background: GrayText;
      }
    }
  }
}