/*!
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-Steplist{
  --spectrum-steplist-step-width:80px;
  --spectrum-steplist-marker-diameter:8px;
  --spectrum-steplist-marker-hitArea:20px;
  --spectrum-steplist-segment-height:2px;
  --spectrum-steplist-topPadding:22px;
  --spectrum-steplist-small-topPadding:11px;
  --spectrum-steplist-sidePadding:60px;
  --spectrum-steplist-label-labelOffset:10px;
  --spectrum-steplist-label-text-size:12px;

  --spectrum-steplist-current-label-text-color:var(--spectrum-gray-800);

  --spectrum-steplist-current-marker-color:var(--spectrum-gray-800);

  --spectrum-steplist-complete-label-text-color:var(--spectrum-gray-700);

  --spectrum-steplist-incomplete-label-color:var(--spectrum-gray-600);

  --spectrum-steplist-complete-marker-background-color:var(--spectrum-gray-600);

  --spectrum-steplist-incomplete-marker-border-color:var(--spectrum-gray-300);

  --spectrum-steplist-incomplete-segment-border-block-end-color:var(--spectrum-gray-300);

  --spectrum-steplist-complete-segment-border-block-end-color:var(--spectrum-gray-600);
}

.spectrum-Steplist{
  z-index:0;
  position:relative;

  display:block;
  vertical-align:top;
  margin:0;
  padding-block-start:var(--mod-steplist-topPadding, var(--spectrum-steplist-topPadding));
  padding-inline-start:var(--mod-steplist-sidePadding, var(--spectrum-steplist-sidePadding));
  padding-inline-end:var(--mod-steplist-sidePadding, var(--spectrum-steplist-sidePadding));

  text-align:center;
  white-space:nowrap;
  font-size:0;
  line-height:16px;
}

.spectrum-Steplist--interactive .spectrum-Steplist-label, .spectrum-Steplist--interactive .spectrum-Steplist-markerContainer{
    cursor:pointer;
  }

.spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item *:focus .spectrum-Steplist-marker{
        background-color:var(--highcontrast-steplist-current-marker-color-key-focus, var(--mod-steplist-current-marker-color-key-focus, var(--spectrum-steplist-current-marker-color-key-focus)));
      }

.spectrum-Steplist--small{
  padding-block:var(--mod-steplist-small-topPadding, var(--spectrum-steplist-small-topPadding));
  padding-inline:0;
}

.spectrum-Steplist--small .spectrum-Steplist-item{
    padding-block:0;
    padding-inline:0 40px;
    inline-size:80px;
  }

.spectrum-Steplist--small .spectrum-Steplist-item .spectrum-Steplist-label{
      display:none;
    }

.spectrum-Steplist--small .spectrum-Steplist-item:first-child, .spectrum-Steplist--small .spectrum-Steplist-item:last-child{
      inline-size:20px;
    }

.spectrum-Steplist--small .spectrum-Steplist-item:first-child .spectrum-Steplist-markerContainer{
        margin-inline-start:-10px;
      }

.spectrum-Steplist--small .spectrum-Steplist-item:last-child .spectrum-Steplist-markerContainer{
        margin-inline-end:-10px;
      }

.spectrum-Steplist-item{
  outline:none;
  position:relative;
  display:inline-block;
  margin:0;
  vertical-align:bottom;

  box-sizing:content-box;
  inline-size:var(--mod-steplist-step-width, var(--spectrum-steplist-step-width));
  padding-block:0;
  padding-inline:0 calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) / 2);
}

.spectrum-Steplist-item.is-complete .spectrum-Steplist-label{
      color:var(--mod-steplist-complete-label-text-color, var(--spectrum-steplist-complete-label-text-color));
    }

.spectrum-Steplist-item.is-complete .spectrum-Steplist-marker{
      background-color:var(--highcontrast-steplist-complete-marker-background-color, var(--mod-steplist-complete-marker-background-color, var(--spectrum-steplist-complete-marker-background-color)));
      border:none;
    }

.spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment{
      border-block-end-width:var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height));
      border-block-end-style:solid;
    }

.spectrum-Steplist-item.is-selected:focus, .spectrum-Steplist-item.is-selected *:focus{
      outline:none;
    }

.spectrum-Steplist-item.is-selected .spectrum-Steplist-label{
      color:var(--mod-steplist-current-label-text-color, var(--spectrum-steplist-current-label-text-color));
    }

.spectrum-Steplist-item.is-selected .spectrum-Steplist-marker{
      border:none;
      background-color:var(--highcontrast-steplist-current-marker-color, var(--mod-steplist-current-marker-color, var(--spectrum-steplist-current-marker-color)));
    }

.spectrum-Steplist-item.is-complete .spectrum-Steplist-segment, .spectrum-Steplist-item.is-selected .spectrum-Steplist-segment{
      border-block-end-color:var(--mod-steplist-complete-segment-border-block-end-color, var(--spectrum-steplist-complete-segment-border-block-end-color));
    }

.spectrum-Steplist-label{
  position:absolute;
  inset-inline-start:50%;
  inset-block-end:var(--mod-steplist-label-labelOffset, var(--spectrum-steplist-label-labelOffset));

  display:block;
  inline-size:calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5);

  font-size:var(--mod-steplist-label-text-size, var(--spectrum-steplist-label-text-size));
  white-space:normal;

  transform:translateX(-50%);

  color:var(--mod-steplist-incomplete-label-color, var(--spectrum-steplist-incomplete-label-color));
}

[dir="rtl"] .spectrum-Steplist-label{
    transform:translateX(50%);
  }

.spectrum-Steplist-label:dir(rtl){
    transform:translateX(50%);
  }

.spectrum-Steplist-markerContainer{
  display:block;

  z-index:2;
  position:absolute;
  inset-block-end:-10px;
  inset-inline-start:50%;

  inline-size:var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea));
  block-size:var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea));

  margin-inline-start:calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2));
}

.spectrum-Steplist-marker{
  box-sizing:border-box;
  display:block;

  position:absolute;
  inset-block-start:50%;
  inset-inline-start:50%;
  margin-block-start:calc(-1 * calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) / 2));
  margin-inline-start:calc(-1 * calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) / 2));

  inline-size:var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter));
  block-size:var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter));

  border-radius:var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter));

  border:2px solid;
  border-color:var(--mod-steplist-incomplete-marker-border-color, var(--spectrum-steplist-incomplete-marker-border-color));
  background:transparent;
}

.spectrum-Steplist-segment{
  display:block;
  z-index:1;
  position:absolute;
  inset-inline-end:calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 1.5));

  box-sizing:content-box;
  inline-size:calc(calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) * 1.5) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 2));
  inset-block-end:calc(-1 * calc(var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height)) / 2));
  border-block-end-width:var(--mod-steplist-segment-height, var(--spectrum-steplist-segment-height));
  border-block-end-style:dashed;

  border-block-end-color:var(--mod-steplist-incomplete-segment-border-block-end-color, var(--spectrum-steplist-incomplete-segment-border-block-end-color));
}

.spectrum-Steplist-item:first-child .spectrum-Steplist-markerContainer{
    inset-inline-start:0;
  }

.spectrum-Steplist-item:first-child .spectrum-Steplist-label{
    inset-inline-start:0;
  }

.spectrum-Steplist-item:first-child .spectrum-Steplist-segment{
    display:none;
  }

.spectrum-Steplist-item:last-child .spectrum-Steplist-label{
    inset-inline-start:auto;
    inset-inline-end:0;

    transform:translateX(50%);
  }

[dir="rtl"] .spectrum-Steplist-item:last-child .spectrum-Steplist-label{
      transform:translateX(-50%);
    }

.spectrum-Steplist-item:last-child .spectrum-Steplist-label:dir(rtl){
      transform:translateX(-50%);
    }

.spectrum-Steplist-item:last-child .spectrum-Steplist-markerContainer{
    inset-inline-start:auto;
    inset-inline-end:0;

    margin-inline-start:0;
    margin-inline-end:calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2));
  }

.spectrum-Steplist-item:last-child .spectrum-Steplist-segment{
    inset-inline-end:var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter));
    inset-inline-start:auto;
  }

.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child{
  inline-size:calc(calc(var(--mod-steplist-step-width, var(--spectrum-steplist-step-width)) / 2) - calc(var(--mod-steplist-marker-diameter, var(--spectrum-steplist-marker-diameter)) * 2.5));
}

.spectrum-Steplist-item:only-child .spectrum-Steplist-label{
    inset-inline-start:50%;
    transform:translate(-50%);
  }

[dir="rtl"] .spectrum-Steplist-item:only-child .spectrum-Steplist-label{
      transform:translateX(50%);
    }

.spectrum-Steplist-item:only-child .spectrum-Steplist-label:dir(rtl){
      transform:translateX(50%);
    }

.spectrum-Steplist-item:only-child .spectrum-Steplist-markerContainer{
    inset-inline-start:50%;
    margin-inline-end:0;
    margin-inline-start:calc(-1 * calc(var(--mod-steplist-marker-hitArea, var(--spectrum-steplist-marker-hitArea)) / 2));
  }

@media (forced-colors: active){
  .spectrum-Steplist{
    --highcontrast-steplist-complete-marker-background-color:CanvasText;
    --highcontrast-steplist-current-marker-color:Highlight;
    --highcontrast-steplist-current-marker-color-key-focus:Highlight;
  }

  @supports (color: SelectedItem){
    .spectrum-Steplist{
      --highcontrast-steplist-current-marker-color:SelectedItem;
    }
  }
}
