// ------------------------------------------------------------------------------
// <auto-generated>
//     This code was generated by a tool.
//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
// </auto-generated>
// ------------------------------------------------------------------------------
// #region Imports
import { css } from '../../../../../Dom/Css';
// #endregion
/**
 * @public
 */
export function scrubSliderElementJoyStyle() {
    return css `
:host {
  --scrub-slider-background-color: var(--joy-scheme-transparent);
  --scrub-slider-border-color: var(--joy-scheme-highlight);
  --scrub-slider-border-radius: var(--joy-layout-radius);
  --scrub-slider-border-style: solid;
  --scrub-slider-border-width: var(--joy-layout-thickness);
  --scrub-slider-font-family: var(--joy-font-family);
  --scrub-slider-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
  --scrub-slider-font-line-height: var(--joy-typography-body1-line-height);
  --scrub-slider-font-size: var(--joy-typography-body1-font-size);
  --scrub-slider-font-text-decoration: var(--joy-typography-body1-text-decoration);
  --scrub-slider-font-text-transform: var(--joy-typography-body1-text-transform);
  --scrub-slider-font-weight: var(--joy-typography-body1-font-weight);
  --scrub-slider-foreground-color: var(--joy-scheme-foreground);
  --scrub-slider-gap: var(--joy-layout-space);
  --scrub-slider-padding-bottom: 0;
  --scrub-slider-padding-left: 0;
  --scrub-slider-padding-right: 0;
  --scrub-slider-padding-top: 0;
  --scrub-slider-shadow: var(--joy-elevation-none);
  --scrub-slider-thumb-background-color: var(--joy-scheme-transparent);
  --scrub-slider-thumb-border-color: var(--joy-scheme-transparent);
  --scrub-slider-thumb-border-radius: var(--joy-layout-radius);
  --scrub-slider-thumb-border-style: solid;
  --scrub-slider-thumb-border-width: var(--joy-layout-thickness);
  --scrub-slider-thumb-foreground-color: var(--joy-scheme-highlight);
  --scrub-slider-thumb-size: 18px;
  --scrub-slider-tick-gap: 0px;
  --scrub-slider-tooltip-background-color: var(--joy-scheme-highlight);
  --scrub-slider-tooltip-border-color: var(--joy-scheme-highlight);
  --scrub-slider-tooltip-border-radius: var(--joy-layout-radius);
  --scrub-slider-tooltip-border-style: none;
  --scrub-slider-tooltip-border-width: 0px;
  --scrub-slider-tooltip-font-family: var(--joy-font-family);
  --scrub-slider-tooltip-font-letter-spacing: var(--joy-typography-body2-letter-spacing);
  --scrub-slider-tooltip-font-line-height: var(--joy-typography-body2-line-height);
  --scrub-slider-tooltip-font-size: var(--joy-typography-body2-font-size);
  --scrub-slider-tooltip-font-text-decoration: var(--joy-typography-body2-text-decoration);
  --scrub-slider-tooltip-font-text-transform: var(--joy-typography-body2-text-transform);
  --scrub-slider-tooltip-font-weight: var(--joy-typography-body2-font-weight);
  --scrub-slider-tooltip-foreground-color: var(--joy-scheme-foreground);
  --scrub-slider-tooltip-gap: var(--joy-layout-space);
  --scrub-slider-tooltip-padding-bottom: var(--joy-layout-space);
  --scrub-slider-tooltip-padding-left: var(--joy-layout-space);
  --scrub-slider-tooltip-padding-right: var(--joy-layout-space);
  --scrub-slider-tooltip-padding-top: var(--joy-layout-space);
  --scrub-slider-tooltip-shadow: var(--joy-elevation-light);
  --scrub-slider-tooltip-transition-duration: var(--joy-duration-short);
  --scrub-slider-tooltip-transition-mode: ease;
  --scrub-slider-tooltip-transition-property: background-color, color, border-color, opacity, transform;
  --scrub-slider-track-size: 4px;
  --scrub-slider-transition-duration: var(--joy-duration-short);
  --scrub-slider-transition-mode: ease;
  --scrub-slider-transition-property: background-color, color, border-color, opacity, transform;
  --scrub-slider-translate: unset;
}

@media screen and (prefers-reduced-motion: reduce) {
  :host {
    transition-duration: .01ms;
  }
}

:host {
  box-sizing: border-box;
  display: block;
  position: relative;
}

:host *, :host :before, :host :after {
  box-sizing: border-box;
  background-repeat: no-repeat;
}

:host :before, :host :after {
  text-decoration: inherit;
  vertical-align: inherit;
}

:host([hidden]) {
  display: none !important;
}

:host {
  --height: 56px;
  --center-width: 3px;
  --tick-gap: 12px;
  --tick-width: 2px;
  --tick-color: var(--joy-scheme-highlight);
  --tick-color-strong: #8b8f96;
  --track-bg: var(--joy-scheme-background);
  --center-color: var(--joy-color-danger-500);
  --value-font: 700 48px / 1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--scrub-slider-font-family);
  font-size: var(--scrub-slider-font-size);
  line-height: var(--scrub-slider-font-line-height);
  font-weight: var(--scrub-slider-font-weight);
  letter-spacing: var(--scrub-slider-font-letter-spacing);
  -webkit-text-decoration: var(--scrub-slider-font-text-decoration);
  text-decoration: var(--scrub-slider-font-text-decoration);
  text-transform: var(--scrub-slider-font-text-transform);
  gap: var(--scrub-slider-gap);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  display: inline-flex;
}

:host [part="root"] {
  width: 100%;
}

:host [part="value"] {
  text-align: center;
  font: var(--value-font);
  color: #111;
}

:host [part="surface"] {
  height: var(--height);
  background: var(--track-bg);
  cursor: ew-resize;
  touch-action: none;
  outline: none;
  position: relative;
}

:host [part^="ticks"] {
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--tick-gap)  - var(--tick-width)), var(--tick-color) calc(var(--tick-gap)  - var(--tick-width)), var(--tick-color) var(--tick-gap));
  background-size: var(--tick-gap) 100%;
  background-repeat: repeat;
  background-position: var(--tick-offset, 0px) 0;
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
}

:host [part$="top"] {
  opacity: .9;
  height: 50%;
  top: 0;
}

:host [part$="bottom"] {
  opacity: .6;
  height: 50%;
  bottom: 0;
}

:host [part="center"] {
  width: var(--center-width);
  background: var(--center-color);
  pointer-events: none;
  border-radius: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

:host [part="labels"] {
  color: #2b2d30;
  opacity: .85;
  place-items: center;
  height: 24px;
  font: 600 14px / 1.2 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, Apple Color Emoji, Segoe UI Emoji;
  display: grid;
}

:host [part="hint"] {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

:host .visually-hidden {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
}

:host(:focus-within) [part="surface"] {
  box-shadow: inset 0 0 0 2px #0000000f;
}

:host(:hover) [part="tooltip"], :host([is-focused]) [part="tooltip"] {
  opacity: 1;
}

:host([tick-placement="none"]) [part="ticks"] {
  display: none;
}

:host([tooltip-placement="before"]) [part="tooltip"] {
  inset-area: top span-all;
  margin: 0 0 var(--slider-gap) 0;
  inset-block-start: calc(var(--scrub-slider-thumb-size) / 2 + var(--scrub-slider-gap));
}

:host([tooltip-placement="after"]) [part="tooltip"] {
  inset-area: bottom span-all;
  margin: var(--slider-gap) 0 0 0;
  inset-block-end: calc(var(--scrub-slider-thumb-size) / 2 + var(--scrub-slider-gap));
}

:host([track]) [part="input"]::-webkit-slider-thumb {
  box-shadow: -407px 0 0 400px #f50;
}

:host([track]) [part="input"]::-moz-range-thumb {
  box-shadow: -407px 0 0 400px #f50;
}

    `;
}
//# sourceMappingURL=ScrubSliderElement.Joy.js.map