/*
    Mixin to progressively-enhance :focus-visible, keeping :focus where not supported
    Add an arbitrary list of selectors into the arguments, and the styling in the block.
    I you pass no selectors to the mixin the parent ("ampersand") operator is used instead.

    There are two mixins: 
    - focus-visible: a generic focus-visible, giving you "slots" to decide what to render for :focus, :focus reset, and :focus-visible
    - focus-visible-outline: a focus-visible, which only resets the outline. If you don't need more custom resets, use this one!

    Use focus-visible:
    The key thing here is checking which slot is being rendered.
    For example, you can reset box-shadow here, or anything else.

    @include focus-visible using ($slot) {
        @if $slot == focus {
            outline: 2px solid transparent;
            box-shadow: 0 0 0 4px blue;
        }
        @if $slot == focusReset {
            box-shadow: none;
        }
        @if $slot == focusVisible {
            box-shadow: 0 0 0 4px blue;
        }
    }

    Use focus-visible-outline:
    @include focus-visible-outline("button", "a[href]") {
        outline: 2px solid blue;
    }

    Resulting CSS (compressed):

    button:focus,
    a[href]:focus {
        outline: 2px solid blue;
    }

    button:focus:not(:focus-visible),
    a[href]:focus:not(:focus-visible) {
        outline: none;
    }
    button:focus-visible,
    a[href]:focus-visible {
        outline: 2px solid blue;
    }
*/
/* stylelint-disable max-nesting-depth */
/**
    @prop --uic-tooltip-border-color: border color of the tooltip panel
    @prop --uic-tooltip-border-color-error: border color of the tooltip panel for error variant
    @prop --uic-tooltip-background-color: background color of the tooltip panel
    @prop --uic-tooltip-z-index: z-index of the tooltip panel
*/
uic-tooltip {
  display: contents;
  position: relative;
  user-select: none;
}

uic-tooltip[open] .uic-tooltip__positioner {
  pointer-events: auto;
}
uic-tooltip[open] .uic-tooltip__content {
  opacity: 1;
}

uic-tooltip[disabled] .uic-tooltip__over {
  cursor: default;
}

uic-tooltip[error] .uic-tooltip__content {
  box-shadow: 0 0 4px 0 var(--uic-atom-shadow-color-error);
  border-color: var(--uic-tooltip-border-color-error);
}
uic-tooltip[error] .uic-tooltip__positioner[data-popper-placement=top-end] .uic-tooltip__content::after,
uic-tooltip[error] .uic-tooltip__positioner[data-popper-placement=bottom-end] .uic-tooltip__content::after {
  border-color: transparent var(--uic-tooltip-border-color-error) transparent transparent;
}
uic-tooltip[error] .uic-tooltip__positioner[data-popper-placement=top-start] .uic-tooltip__content::after,
uic-tooltip[error] .uic-tooltip__positioner[data-popper-placement=bottom-start] .uic-tooltip__content::after {
  border-color: transparent transparent transparent var(--uic-tooltip-border-color-error);
}

.uic-tooltip__over {
  cursor: help;
  display: inline-block;
  touch-action: none;
}
.uic-tooltip__over uic-icon:first-child:last-child {
  display: block;
}
.uic-tooltip__positioner {
  position: absolute;
  pointer-events: none;
  z-index: var(--uic-tooltip-z-index, 1000);
}
.uic-tooltip__content {
  position: relative;
  text-align: left;
  opacity: 0;
  padding: 8px 12px;
  border: 1px solid var(--uic-tooltip-border-color);
  background-color: var(--uic-tooltip-background-color);
  box-shadow: 0 0 6px 0 var(--uic-color-blue6);
  font-size: 0.8rem;
  line-height: 16px;
  white-space: normal;
}
.uic-tooltip__content::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
.uic-tooltip__content::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
@media only screen and (max-width: 1919px) {
  .uic-tooltip__content {
    min-width: 112px;
  }
}
@media only screen and (min-width: 1920px) {
  .uic-tooltip__content {
    min-width: 134px;
  }
}
@media only screen and (max-width: 1919px) {
  .uic-tooltip__content--restricted-width {
    max-width: 192px;
  }
}
@media only screen and (min-width: 1920px) {
  .uic-tooltip__content--restricted-width {
    max-width: 230px;
  }
}
.uic-tooltip__close-button {
  position: absolute;
  top: 8px;
  right: 8px;
}
.uic-tooltip__content--closeable {
  padding: calc(var(--uic-icon-button-height) / 2) calc(var(--uic-icon-button-width) + 16px) calc(var(--uic-icon-button-height) / 2) 16px;
}

.uic-tooltip__positioner[data-popper-placement=top-start] .uic-tooltip__content::after {
  bottom: -13px;
  left: -1px;
  border-bottom: 13px solid transparent;
  border-left: 13px solid var(--uic-tooltip-border-color);
}
.uic-tooltip__positioner[data-popper-placement=top-start] .uic-tooltip__content::before {
  bottom: -11px;
  left: 0;
  z-index: 10;
  border-bottom: 11px solid transparent;
  border-left: 11px solid var(--uic-tooltip-background-color);
}

.uic-tooltip__positioner[data-popper-placement=top-end] .uic-tooltip__content::after {
  right: -1px;
  bottom: -13px;
  border-right: 13px solid var(--uic-tooltip-border-color);
  border-bottom: 13px solid transparent;
}
.uic-tooltip__positioner[data-popper-placement=top-end] .uic-tooltip__content::before {
  right: 0;
  bottom: -11px;
  z-index: 10;
  border-right: 11px solid var(--uic-tooltip-background-color);
  border-bottom: 11px solid transparent;
}

.uic-tooltip__positioner[data-popper-placement=bottom-start] .uic-tooltip__content::after {
  top: -13px;
  left: -1px;
  border-top: 13px solid transparent;
  border-left: 13px solid var(--uic-tooltip-border-color);
}
.uic-tooltip__positioner[data-popper-placement=bottom-start] .uic-tooltip__content::before {
  top: -11px;
  left: 0;
  z-index: 10;
  border-top: 11px solid transparent;
  border-left: 11px solid var(--uic-tooltip-background-color);
}

.uic-tooltip__positioner[data-popper-placement=bottom-end] .uic-tooltip__content::after {
  top: -13px;
  right: -1px;
  border-top: 13px solid transparent;
  border-right: 13px solid var(--uic-tooltip-border-color);
}
.uic-tooltip__positioner[data-popper-placement=bottom-end] .uic-tooltip__content::before {
  top: -11px;
  right: 0;
  z-index: 10;
  border-top: 11px solid transparent;
  border-right: 11px solid var(--uic-tooltip-background-color);
}