/*!
Copyright 2023 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

.spectrum-Dial{
  --spectrum-dial-background-color-default:var(--spectrum-gray-100);

  --spectrum-dial-handle-marker-color-disabled:var(--spectrum-gray-300);
  --spectrum-dial-border-color-disabled:var(--spectrum-gray-300);

  --spectrum-dial-handle-marker-color:var(--spectrum-gray-700);
  --spectrum-dial-border-color:var(--spectrum-gray-700);

  --spectrum-dial-handle-marker-color-down:var(--spectrum-gray-800);
  --spectrum-dial-border-color-down:var(--spectrum-gray-800);
  --spectrum-dial-handle-marker-color-hover:var(--spectrum-gray-800);
  --spectrum-dial-border-color-hover:var(--spectrum-gray-800);

  --spectrum-dial-handle-marker-color-key-focus:var(--spectrum-gray-50);
  --spectrum-dial-border-color-key-focus:var(--spectrum-gray-50);

  --spectrum-dial-handle-marker-color-mouse-focus:var(--spectrum-gray-700);
  --spectrum-dial-border-color-mouse-focus:var(--spectrum-gray-700);

  --spectrum-dial-min-max-tick-color:var(--spectrum-gray-600);

  --spectrum-dial-label-text-color:var(--spectrum-gray-700);
  --spectrum-dial-label-text-color-disabled:var(--spectrum-gray-700);
  --spectrum-dial-handle-border-color-disabled:var(--spectrum-gray-400);

  --spectrum-dial-container-width:48px;

  --spectrum-dial-handle-marker-width:12px;
  --spectrum-dial-handle-marker-height:2px;

  --spectrum-dial-handle-marker-border-radius:1px;

  --spectrum-dial-handle-size:100%;
  --spectrum-dial-min-height:0;
  --spectrum-dial-controls-min-height:0;

  --spectrum-dial-min-max-tick-angles:45deg;

  --spectrum-dial-width:32px;
  --spectrum-dial-height:32px;

  --spectrum-dial-handle-border-size:var(--spectrum-border-width-200);
  --spectrum-dial-label-text-size:var(--spectrum-font-size-75);
  --spectrum-dial-label-line-height:var(--spectrum-line-height-200);
}

.spectrum-Dial--small{
  --spectrum-dial-width:24px;
  --spectrum-dial-height:24px;
}

.spectrum-Dial{
  position:relative;
  z-index:1;
  -webkit-user-select:none;
          user-select:none;
  display:inline-flex;
  flex-direction:column;
  block-size:auto;
  min-inline-size:var(--mod-dial-min-height, var(--spectrum-dial-min-height));
  min-block-size:var(--mod-dial-min-height, var(--spectrum-dial-min-height));
  inline-size:var(--mod-dial-container-width, var(--spectrum-dial-container-width));
}

.spectrum-Dial-label{
  padding-inline-start:0;
  flex-grow:1;
}

.spectrum-Dial-label:only-child{
    text-align:center;
  }

.spectrum-Dial-value{
  flex-grow:0;
  padding-inline-end:0;
  cursor:default;
}

.spectrum-Dial-labelContainer{
  color:var(--highcontrast-dial-label-text-color, var(--mod-dial-label-text-color, var(--spectrum-dial-label-text-color)));
  display:flex;
  position:relative;
  inline-size:auto;
  padding-block-start:var(--mod-dial-label-container-top-to-text, var(--spectrum-dial-label-container-top-to-text));
  font-size:var(--mod-dial-label-text-size, var(--spectrum-dial-label-text-size));
  line-height:var(--mod-dial-label-line-height, var(--spectrum-dial-label-line-height));
  margin-block-end:var(--mod-dial-label-gap-y, var(--spectrum-dial-label-gap-y));
}

.spectrum-Dial-controls{
  display:inline-block;
  box-sizing:border-box;

  position:relative;
  z-index:auto;

  vertical-align:top;

  inline-size:var(--mod-dial-width, var(--spectrum-dial-width));
  block-size:var(--mod-dial-height, var(--spectrum-dial-height));
  min-block-size:var(--mod-dial-controls-min-height, var(--spectrum-dial-controls-min-height));
  margin-inline-start:var(--mod-dial-controls-margin, var(--spectrum-dial-controls-margin));

  border-radius:var(--mod-dial-border-radius, var(--spectrum-dial-border-radius));
  margin-block:0;

  outline:none;
}

.spectrum-Dial-controls::before, .spectrum-Dial-controls::after{
    background-color:var(--highcontrast-dial-min-max-tick-color, var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color)));
    content:"";
    inline-size:calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * 2);
    block-size:var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height));
    border-radius:var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius));
    position:absolute;
    inset-block-end:0;
  }

.spectrum-Dial-controls::before{
    inset-inline-start:auto;
    inset-inline-end:calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1);
    transform:rotate(var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles)));
  }

.spectrum-Dial-controls::after{
    inset-inline-start:calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1);
    transform:rotate(calc(-1 * var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles))));
  }

.spectrum-Dial-handle{
  box-shadow:none;
  border-color:var(--highcontrast-dial-border-color, var(--mod-dial-border-color, var(--spectrum-dial-border-color)));
  position:absolute;
  z-index:2;
  display:inline-block;
  box-sizing:border-box;

  margin-block:calc(var(--mod-dial-handle-block-margin, var(--spectrum-dial-handle-block-margin)) / -2) 0;
  margin-inline:calc(var(--mod-dial-handle-inline-margin, var(--spectrum-dial-handle-inline-margin)) / -2) 0;

  outline:none;

  inline-size:var(--mod-dial-handle-size, var(--spectrum-dial-handle-size));
  block-size:var(--mod-dial-handle-size, var(--spectrum-dial-handle-size));
  border-width:var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size));
  border-style:solid;
  inset-block-start:var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
  inset-inline-start:var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
  inset-inline-end:var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
  inset-block-end:var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
  border-radius:var(--mod-dial-border-radius, var(--spectrum-dial-border-radius));
  transform:rotate(calc(-1 * var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles))));
  cursor:grab;
}

.spectrum-Dial-handle::before{
    display:none;
  }

.spectrum-Dial-handle::after{
    content:"";
    position:absolute;
    inset-block-start:50%;
    inset-inline-start:calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1);
    inline-size:var(--mod-dial-handle-marker-width, var(--spectrum-dial-handle-marker-width));
    block-size:var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height));
    border-radius:var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius));
    transform:translateY(-50%);
    background-color:var(--highcontrast-dial-handle-marker-color, var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color)));
  }

.spectrum-Dial-handle:active, .spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle[focus-within].js-focus-within, .js-focus-within .spectrum-Dial-handle[focus-within], .spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle.is-active, .spectrum-Dial-handle.is-focus-visible, .spectrum-Dial-handle.is-focus-within,
.spectrum-Dial-handle.is-active,
.spectrum-Dial-handle.is-focus-visible{
    border-width:var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size));
    cursor:ns-resize;
    cursor:grabbing;
  }

.spectrum-Dial-handle:active, .spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within, .spectrum-Dial-handle.is-dragged,
.spectrum-Dial-handle.is-active,
.spectrum-Dial-handle.is-focus-visible,
.spectrum-Dial-handle.is-focus-within{
    border-width:var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size));
    cursor:ns-resize;
    cursor:grabbing;
  }

@media (hover: hover){

.spectrum-Dial-handle:hover,
.spectrum-Dial-handle.is-hover{
    border-color:var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover)));
  }

.spectrum-Dial-handle:hover::after,
.spectrum-Dial-handle.is-hover::after{
      background-color:var(--highcontrast-dial-handle-marker-color-hover, var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover)));
    }
}

.spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle[focus-within].js-focus-within, .js-focus-within .spectrum-Dial-handle[focus-within], .spectrum-Dial-handle.is-focus-visible, .spectrum-Dial-handle.is-focus-within,
.spectrum-Dial-handle.is-focus-visible{
    background-color:var(--highcontrast-dial-handle-marker-color-mouse-focus, var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus)));
    border-color:var(--highcontrast-dial-handle-marker-color-mouse-focus, var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus)));
  }

.spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within,
.spectrum-Dial-handle.is-focus-visible,
.spectrum-Dial-handle.is-focus-within{
    background-color:var(--highcontrast-dial-handle-marker-color-mouse-focus, var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus)));
    border-color:var(--highcontrast-dial-handle-marker-color-mouse-focus, var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus)));
  }

.spectrum-Dial-handle:focus-visible::after, .spectrum-Dial-handle[focus-within].js-focus-within::after, .js-focus-within .spectrum-Dial-handle[focus-within]::after, .spectrum-Dial-handle.is-focus-visible::after, .spectrum-Dial-handle.is-focus-within::after,
.spectrum-Dial-handle.is-focus-visible::after{
      background-color:var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus)));
    }

.spectrum-Dial-handle:focus-visible::after, .spectrum-Dial-handle:focus-within::after,
.spectrum-Dial-handle.is-focus-visible::after,
.spectrum-Dial-handle.is-focus-within::after{
      background-color:var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus)));
    }

.spectrum-Dial-handle:active, .spectrum-Dial-handle.is-dragged,
.spectrum-Dial-handle.is-active{
    background-color:var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover)));
    border-color:var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover)));
  }

.spectrum-Dial-handle:active::after, .spectrum-Dial-handle.is-dragged::after,
.spectrum-Dial-handle.is-active::after{
      background-color:var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus)));
    }

.spectrum-Dial-input{
  margin:0;
  padding:0;
  position:absolute;
  overflow:hidden;
  opacity:0.000001;
  cursor:default;
  appearance:none;
  border:0;
  pointer-events:none;
  inline-size:var(--spectrum-dial-handle-size);
  block-size:var(--spectrum-dial-handle-size);
  inset-inline-start:0;
  inset-block-start:0;
}

.spectrum-Dial-input:focus{
    outline:none;
  }

.spectrum-Dial.is-disabled .spectrum-Dial-labelContainer{
      color:var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled)));
    }

.spectrum-Dial.is-disabled .spectrum-Dial-controls::after, .spectrum-Dial.is-disabled .spectrum-Dial-controls::before{
        background-color:var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
      }

.spectrum-Dial.is-disabled .spectrum-Dial-handle{
      cursor:default;
      border-color:var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
      background:var(--highcontrast-dial-background-color-default, var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default)));
    }

.spectrum-Dial.is-disabled .spectrum-Dial-handle::after, .spectrum-Dial.is-disabled .spectrum-Dial-handle::before{
        background-color:var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
      }

.u-isGrabbing{
  cursor:ns-resize;
  cursor:grabbing;

  -webkit-user-select:none;

          user-select:none;
}

.u-isGrabbing .spectrum-Dial .spectrum-Dial-label, .u-isGrabbing .spectrum-Dial .spectrum-Dial-value{
      cursor:inherit;
    }

@media (forced-colors: active){
  .spectrum-Dial{
    --highcontrast-dial-min-max-tick-color:Highlight;
    --highcontrast-dial-border-color:Highlight;
    --highcontrast-dial-handle-marker-color:Highlight;
    --highcontrast-dial-border-color-hover:Highlight;
    --highcontrast-dial-handle-marker-color-hover:Highlight;
    --highcontrast-dial-handle-marker-color-key-focus:HighlightText;
    --highcontrast-dial-label-text-color-disabled:GrayText;
    --highcontrast-dial-handle-border-color-disabled:GrayText;
  }
}
