/*!
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{
  --system-spectrum-closebutton-background-color-default:transparent;
  --system-spectrum-closebutton-background-color-hover:var(--spectrum-gray-200);
  --system-spectrum-closebutton-background-color-down:var(--spectrum-gray-300);
  --system-spectrum-closebutton-background-color-focus:var(--spectrum-gray-200);
}

.spectrum--express{
  --system-spectrum-closebutton-background-color-default:transparent;
  --system-spectrum-closebutton-background-color-hover:var(--spectrum-gray-300);
  --system-spectrum-closebutton-background-color-down:var(--spectrum-gray-400);
  --system-spectrum-closebutton-background-color-focus:var(--spectrum-gray-300);
}

.spectrum-CloseButton{
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  position:relative;
  overflow:visible;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  box-sizing:border-box;
  margin:0;
  font-family:var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
  line-height:var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
  -webkit-text-decoration:none;
  text-decoration:none;
  text-transform:none;
  vertical-align:top;
  -webkit-appearance:button;
  border-style:solid;

  transition:background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.spectrum-CloseButton::-moz-focus-inner{
    margin-block-start:-2px;
    margin-block-end:-2px;
    padding:0;

    border:0;
    border-style:none;
  }

.spectrum-CloseButton:focus{
    outline:none;
  }

.spectrum-CloseButton:disabled, .spectrum-CloseButton.is-disabled,
.spectrum-CloseButton.is-disabled{
    cursor:default;
  }

a.spectrum-CloseButton{
  -webkit-user-select:none;
          user-select:none;
  -webkit-appearance:none;
}

.spectrum-CloseButton{
  --spectrum-closebutton-size-300:24px;
  --spectrum-closebutton-size-400:32px;
  --spectrum-closebutton-size-500:40px;
  --spectrum-closebutton-size-600:48px;
  --spectrum-closebutton-icon-color-default:var(--spectrum-neutral-content-color-default);
  --spectrum-closebutton-icon-color-hover:var(--spectrum-neutral-content-color-hover);
  --spectrum-closebutton-icon-color-down:var(--spectrum-neutral-content-color-down);
  --spectrum-closebutton-icon-color-focus:var(--spectrum-neutral-content-color-key-focus);
  --spectrum-closebutton-icon-color-disabled:var(--spectrum-disabled-content-color);
  --spectrum-closebutton-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);
  --spectrum-closebutton-focus-indicator-gap:var(--spectrum-focus-indicator-gap);
  --spectrum-closebutton-focus-indicator-color:var(--spectrum-focus-indicator-color);
  --spectrum-closebutton-height:var(--spectrum-component-height-100);
  --spectrum-closebutton-width:var(--spectrum-closebutton-height);
  --spectrum-closebutton-size:var(--spectrum-closebutton-size-400);
  --spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-400);

  --spectrum-closebutton-animation-duration:var(--spectrum-animation-duration-100);
}

.spectrum-Closebutton--sizeS{
  --spectrum-closebutton-height:var(--spectrum-component-height-75);
  --spectrum-closebutton-width:var(--spectrum-closebutton-height);
  --spectrum-closebutton-size:var(--spectrum-closebutton-size-300);
  --spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-300);
}

.spectrum-Closebutton--sizeM{
  --spectrum-closebutton-height:var(--spectrum-component-height-100);
  --spectrum-closebutton-width:var(--spectrum-closebutton-height);
  --spectrum-closebutton-size:var(--spectrum-closebutton-size-400);
  --spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-400);
}

.spectrum-Closebutton--sizeL{
  --spectrum-closebutton-height:var(--spectrum-component-height-200);
  --spectrum-closebutton-width:var(--spectrum-closebutton-height);
  --spectrum-closebutton-size:var(--spectrum-closebutton-size-500);
  --spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-500);
}

.spectrum-Closebutton--sizeXL{
  --spectrum-closebutton-height:var(--spectrum-component-height-300);
  --spectrum-closebutton-width:var(--spectrum-closebutton-height);
  --spectrum-closebutton-size:var(--spectrum-closebutton-size-600);
  --spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-600);
}

.spectrum-CloseButton--staticWhite{
  --spectrum-closebutton-static-background-color-default:transparent;
  --spectrum-closebutton-static-background-color-hover:var(--spectrum-transparent-white-300);
  --spectrum-closebutton-static-background-color-down:var(--spectrum-transparent-white-400);
  --spectrum-closebutton-static-background-color-focus:var(--spectrum-transparent-white-300);
  --spectrum-closebutton-icon-color-default:var(--spectrum-white);
  --spectrum-closebutton-icon-color-disabled:var(--spectrum-disabled-static-white-content-color);
  --spectrum-closebutton-focus-indicator-color:var(--spectrum-static-white-focus-indicator-color);
}

.spectrum-CloseButton--staticBlack{
  --spectrum-closebutton-static-background-color-default:transparent;
  --spectrum-closebutton-static-background-color-hover:var(--spectrum-transparent-black-300);
  --spectrum-closebutton-static-background-color-down:var(--spectrum-transparent-black-400);
  --spectrum-closebutton-static-background-color-focus:var(--spectrum-transparent-black-300);
  --spectrum-closebutton-icon-color-default:var(--spectrum-black);
  --spectrum-closebutton-icon-color-disabled:var(--spectrum-disabled-static-black-content-color);
  --spectrum-closebutton-focus-indicator-color:var(--spectrum-static-black-focus-indicator-color);
}

@media (forced-colors: active){
  .spectrum-CloseButton{
    --highcontrast-closebutton-icon-color-disabled:GrayText;
    --highcontrast-closebutton-icon-color-down:Highlight;
    --highcontrast-closebutton-icon-color-hover:Highlight;
    --highcontrast-closebutton-icon-color-focus:Highlight;
    --highcontrast-closebutton-background-color-default:ButtonFace;
    --highcontrast-closebutton-focus-indicator-color:ButtonText;
  }
      .spectrum-CloseButton:focus-visible::after,
.spectrum-CloseButton.is-focus-visible::after{
        forced-color-adjust:none;
        margin:var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap));
        transition:opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out,margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out;
      }

  .spectrum-CloseButton--staticBlack{
    --highcontrast-closebutton-static-background-color-default:ButtonFace;
    --highcontrast-closebutton-icon-color-default:Highlight;
    --highcontrast-closebutton-icon-color-disabled:GrayText;
  }

  .spectrum-CloseButton--staticWhite{
    --highcontrast-closebutton-static-background-color-default:ButtonFace;
    --highcontrast-closebutton-icon-color-default:Highlight;
    --highcontrast-closebutton-icon-color-disabled:Highlight;
  }
}

.spectrum-CloseButton{

  block-size:var(--mod-closebutton-height, var(--spectrum-closebutton-height));
  inline-size:var(--mod-closebutton-width, var(--spectrum-closebutton-width));

  position:relative;

  color:inherit;

  border-color:transparent;
  border-radius:var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius));
  border-width:0;

  justify-content:center;
  align-items:center;
  flex-direction:row;
  display:inline-flex;
  padding:0;

  transition:border-color var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;

  margin-inline:var(--mod-closebutton-margin-inline);
  margin-block-start:var(--mod-closebutton-margin-top);
  align-self:var(--mod-closebutton-align-self);
}

.spectrum-CloseButton::after{
    pointer-events:none;
    content:'';
    position:absolute;
    inset-inline-start:0;
    inset-inline-end:0;
    inset-block-end:0;
    inset-block-start:0;
    margin:calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1);
    border-radius:calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)));
    transition:box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;
  }

.spectrum-CloseButton:focus-visible,
.spectrum-CloseButton.is-focus-visible{
    box-shadow:none;
    outline:none;
  }

.spectrum-CloseButton:focus-visible::after,
.spectrum-CloseButton.is-focus-visible::after{
      box-shadow:0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness)) var(--highcontrast-closebutton-focus-indicator-color, var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color)));

    }

.spectrum-CloseButton:not(:disabled){
  background-color:var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)));
}

.spectrum-CloseButton:not(:disabled):active,
.spectrum-CloseButton:not(:disabled).is-active{
    background-color:var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down));
  }

.spectrum-CloseButton:not(:disabled):active .spectrum-CloseButton-UIIcon,
.spectrum-CloseButton:not(:disabled).is-active .spectrum-CloseButton-UIIcon{
      color:var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down)));
    }

.spectrum-CloseButton:not(:disabled):focus-visible, .spectrum-CloseButton.is-keyboardFocused:not(:disabled),
.spectrum-CloseButton:not(:disabled).is-focus-visible{
    background-color:var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus));
  }

.spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon, .spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon,
.spectrum-CloseButton:not(:disabled).is-focus-visible .spectrum-CloseButton-UIIcon{
      color:var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
    }

.spectrum-CloseButton:not(:disabled) .spectrum-CloseButton-UIIcon{
    color:var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
  }

.spectrum-CloseButton:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon{
      color:var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
    }

.spectrum-CloseButton:disabled,
.spectrum-CloseButton.is-disabled,
.spectrum-CloseButton.is-disabled{
  background-color:var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default));
}

.spectrum-CloseButton:disabled .spectrum-CloseButton-UIIcon, .spectrum-CloseButton.is-disabled .spectrum-CloseButton-UIIcon,
.spectrum-CloseButton.is-disabled .spectrum-CloseButton-UIIcon{
    color:var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
  }

.spectrum-CloseButton--staticBlack:not(:disabled), .spectrum-CloseButton--staticWhite:not(:disabled){
  background-color:var(--highcontrast-closebutton-static-background-color-default, var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default)));
}

@media (hover: hover){

.spectrum-CloseButton:not(:disabled):hover,
.spectrum-CloseButton:not(:disabled).is-hover{
    background-color:var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover));
  }

.spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon,
.spectrum-CloseButton:not(:disabled).is-hover .spectrum-CloseButton-UIIcon{
      color:var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover)));
    }

.spectrum-CloseButton--staticBlack:not(:disabled):hover, .spectrum-CloseButton--staticWhite:not(:disabled):hover,
.spectrum-CloseButton--staticBlack:not(:disabled).is-hover,
.spectrum-CloseButton--staticWhite:not(:disabled).is-hover{
    background-color:var(--highcontrast-closebutton-static-background-color-hover, var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover)));
  }

.spectrum-CloseButton--staticBlack:not(:disabled):hover .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):hover .spectrum-CloseButton-UIIcon,
.spectrum-CloseButton--staticBlack:not(:disabled).is-hover .spectrum-CloseButton-UIIcon,
.spectrum-CloseButton--staticWhite:not(:disabled).is-hover .spectrum-CloseButton-UIIcon{
      color:var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
    }
}

.spectrum-CloseButton--staticBlack:not(:disabled):active, .spectrum-CloseButton--staticWhite:not(:disabled):active,
.spectrum-CloseButton--staticBlack:not(:disabled).is-active,
.spectrum-CloseButton--staticWhite:not(:disabled).is-active{
    background-color:var(--highcontrast-closebutton-static-background-color-down, var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down)));
  }

.spectrum-CloseButton--staticBlack:not(:disabled):active .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):active .spectrum-CloseButton-UIIcon,
.spectrum-CloseButton--staticBlack:not(:disabled).is-active .spectrum-CloseButton-UIIcon,
.spectrum-CloseButton--staticWhite:not(:disabled).is-active .spectrum-CloseButton-UIIcon{
      color:var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
    }

.spectrum-CloseButton--staticBlack:not(:disabled):focus-visible, .spectrum-CloseButton--staticWhite:not(:disabled):focus-visible, .spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled), .spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled),
.spectrum-CloseButton--staticBlack:not(:disabled).is-focus-visible,
.spectrum-CloseButton--staticWhite:not(:disabled).is-focus-visible{
    background-color:var(--highcontrast-closebutton-static-background-color-focus, var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus)));
  }

.spectrum-CloseButton--staticBlack:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon,
.spectrum-CloseButton--staticBlack:not(:disabled).is-focus-visible .spectrum-CloseButton-UIIcon,
.spectrum-CloseButton--staticWhite:not(:disabled).is-focus-visible .spectrum-CloseButton-UIIcon{
      color:var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
    }

.spectrum-CloseButton--staticBlack:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon{
      color:var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
    }

.spectrum-CloseButton--staticBlack:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled) .spectrum-CloseButton-UIIcon{
    color:var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
  }

.spectrum-CloseButton--staticBlack:disabled .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:disabled .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack.is-disabled .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-disabled .spectrum-CloseButton-UIIcon,
.spectrum-CloseButton--staticBlack.is-disabled .spectrum-CloseButton-UIIcon,
.spectrum-CloseButton--staticWhite.is-disabled .spectrum-CloseButton-UIIcon{
    color:var(--highcontrast-closebutton-icon-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
  }

.spectrum-CloseButton-UIIcon{
  margin:0;
}

.spectrum-CloseButton{
  --spectrum-closebutton-background-color-default:var(--system-spectrum-closebutton-background-color-default);
  --spectrum-closebutton-background-color-hover:var(--system-spectrum-closebutton-background-color-hover);
  --spectrum-closebutton-background-color-down:var(--system-spectrum-closebutton-background-color-down);
  --spectrum-closebutton-background-color-focus:var(--system-spectrum-closebutton-background-color-focus);
}
