/*
 * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None
 * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with ".sd-"
 * to reduce the possibility of collisions.
 */

:root {
  --sd-duration-fast: 150ms;
  --sd-duration-medium: 300ms;
  --sd-duration-slow: 500ms;
  --sd-duration-x-slow: 750ms;
}

.sd-scroll-lock {
  padding-right: var(--sd-scroll-lock-size) !important;
  overflow: hidden !important;
}

.sd-toast-stack {
  position: fixed;
  z-index: var(--sd-z-index-alert-group, 950);
  box-sizing: border-box;
  max-height: 100%;
  max-width: 400px;
}

.sd-toast-stack--top-right {
  top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
  right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
  margin-right: var(--sd-spacing-4, 1rem) /* 16px */;
}

.sd-toast-stack--bottom-center {
  bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    inset-inline-start: 50%;
}

.sd-toast-stack sd-notification::part(wrapper) {
  --tw-shadow: var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));
  --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.sd-toast-stack sd-notification::part(content) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
}