/**
 * Added styles to CSS Cascade Layer to make it easier to override them.
 * Properties that are commented out are shown as examples of CSS variables that are used, but do not require a default to be set.
 */
@layer admin-bar {
  admin-bar {
    /* The height and width of avatar images. By default the avatar has an aspect ratio of `1 / 1` but this can be overwritten using the `admin-bar::part(avatar)` selector. */
    --admin-bar-avatar-size: 25px;

    /* Sets the background of the `<admin-bar>` elements and popovers using the background shorthand property, allowing you to use a gradient, a solid color, or an image. */
    /*--admin-bar-bg: var(--admin-bar-bg-color);*/

    /* Used to set the background color and to define colors for minor UI elements. The background will get overridden if `--admin-bar-bg` is set. */
    --admin-bar-bg-color: oklch(0 0 0 / 0.5);

    /* The backdrop-filter value that affects elements behind Admin Bar Component. */
    --admin-bar-bg-filter: blur(13px) brightness(0.65) saturate(2.5);

    /* The vertical padding default for Admin Bar child elements. */
    --admin-bar-block-padding: 0;

    /* The default border radius used on all surfaces. */
    --admin-bar-border-radius: 6px;

    /* The color of the text and icons during the hover state. */
    --admin-bar-color-highlight: oklch(0.6 0.4 83);

    /* The highlight color specific to logout buttons. That can be set to
    a different color to make it more obvious that the logout button is not a link. */
    --admin-bar-color-highlight-logout: var(--admin-bar-color-highlight);

    /* The color of text when the logout button is in the hover state. */
    --admin-bar-color-text-logout: var(--admin-bar-color-text);

    /* The color of text for everything but button labels. */
    --admin-bar-color-text: oklch(1 0 89.876 / 0.9);

    /* When the `show-environment` attribute is added to an `<admin-bar>` an environment
    warning will appear. The default looks like yellow, striped hazard tape,
    but you can use any CSS value used in the background shorthand property. */
    --admin-bar-environment-bg: repeating-linear-gradient(
        -45deg,
        var(--admin-bar-environment-bg-color),
        var(--admin-bar-environment-bg-color) 18px,
        transparent 18px,
        transparent 30px
    );

    /* Change just the color of the yellow stripes in the environment warning. */
    --admin-bar-environment-bg-color: oklch(0.9 0.4 98);

    /* The height of the environment warning */
    --admin-bar-environment-height: 5px;

    /* The font size for all text. */
    --admin-bar-font-size: .9rem;

    /* The font stack for all text. Set this to `inherit` to match the font-family of the parent element (including fonts set in @font-face). */
    --admin-bar-font-stack: system-ui, sans-serif;

    /* The height of the bar and child elements. */
    --admin-bar-height: 43px;

    /* The horizontal padding default for Admin Bar child elements. */
    --admin-bar-inline-padding: clamp(4px, 2vw, 13px);

    /* Sets the amount of space Admin Bar is inset from the top, bottom, and sides of the viewport. */
    --admin-bar-inset-size: clamp(2px, 1vw, 10px);

    /* Adds a box-shadow to avatar images and buttons. */
    --admin-bar-shadow-elements: 0 1px 2px color-mix(in oklch, oklch(0 0 0 / 0.4), currentColor 10%), 0 3px 6px color-mix(in oklch, oklch(0 0 0 / 0.3), currentColor 10%);

    /* The default transition duration for all animations.
    Set this to `0` to turn off transitions. */
    --admin-bar-transition-duration: 0.3s;

    /* By default, when adding the `fixed` or `sticky` class to an `<admin-bar>`,
     the z-index of the element is set to `1`. Set this property if you need the
     z-index to be a higher value. */
    /*--admin-bar-z-index: 1;*/

    /* ====================================================================== */

    /* The color used for the the progress bar when displaying progress below 100. */
    --admin-bar-progress-color: oklch(0.6 0.24 253.14 / 0.7);

    /**
     * The color used for the the progress bar when displaying an error.
     * (When the `progress` attribute is set below 0)
     */
    --admin-bar-progress-color-error: oklch(0.66 0.29 30.27 / 0.7);

    /**
     * The color used for the the progress bar when displaying a successful action.
     * (When the `progress` attribute is set to 100 or higher)
     */
    --admin-bar-progress-color-success: oklch(0.85 0.36 146.38 / 0.7);

    /* The height of the progress bar. The progress bar is attached to the bottom of the bar and goes behind all child elements. */
    --admin-bar-progress-height: 100%;

    /* ====================================================================== */

    /* Overrides the display value of the internal toolbar toggle button. */
    /*--admin-bar-toolbar-toggle-display: none;*/

    /* ====================================================================== */

    /* The background of all buttons. */
    --admin-bar-button-color-bg: transparent;

    /* The background of the button that is currently in the hover state. */
    --admin-bar-button-color-bg-hover: var(--admin-bar-button-color-text, white);

    /* The text of all button labels. */
    --admin-bar-button-color-text: oklch(1 0 89.876);

    /* The default color of text on button popover elements. */
    --admin-bar-button-popover-color-text: var(--admin-bar-color-text, oklch(1 0 89.876));

    /* The background of the button popover element. */
    --admin-bar-button-popover-bg: var(--admin-bar-bg, var(--admin-bar-bg-color));

    /* The `border-radius` property of the button popover element.  */
    --admin-bar-button-popover-border-radius: var(--admin-bar-border-radius);

    /* ====================================================================== */

    /* The value of the padding property on `<admin-bar-text>` components. */
    /*--admin-bar-text-padding: var(--admin-bar-block-padding) var(--admin-bar-inline-padding);*/

    /* The background color for badge elements in `<admin-bar-text>` components. */
    --admin-bar-badge-color-bg: oklch(1 0 89.876 / 0.9);

    /* The text color for badge elements in `<admin-bar-text>` components. */
    --admin-bar-badge-color-text: oklch(0 0 0);

    /* ====================================================================== */

    /* Stop `<admin-bar-button>` elements from shrinking on resize. */
    & > admin-bar-button {
      flex-shrink: 0;
    }

    /* Removes redundant padding when a `<admin-bar-text>` element is nested inside a `<admin-bar-button>` element. */
    admin-bar-button > admin-bar-text:not([slot="popover"]) {
      --admin-bar-inline-padding: 0;
    }

    /* Set badge background color to highlight color when a `<admin-bar-text>` element is nested inside a `<admin-bar-button>` element. */
    admin-bar-button:hover:not(:has([slot="popover"]:hover)) > admin-bar-text:not([slot="popover"]) {
      --admin-bar-color-text: var(--admin-bar-color-highlight);

      &::part(badge) {
        background-color: var(--admin-bar-color-highlight);
        color: var(--admin-bar-button-color-text);
      }
    }

    /* ====================================================================== */

    /* Set read direction from right to left. */
    &.rtl {
      direction: rtl;
    }
    /* Fixes `<admin-bar>` to the top of page. */
    &.fixed {
      position: fixed;
      inset-inline: var(--admin-bar-inset-size, 0);
      z-index: var(--admin-bar-z-index, 1);

      &:not(.bottom) {
        inset-block-start: var(--admin-bar-inset-size, 0);
      }

      admin-bar-button::part(popover) {
        max-width: 900px;
        max-height: calc(100dvh - calc(var(--admin-bar-height) * 2));
      }
    }
    /* Sticks `<admin-bar>` to the top of the page when scrolling. */
    &.sticky {
      position: sticky;
      margin-inline: var(--admin-bar-inset-size, 0);
      z-index: var(--admin-bar-z-index, 1);

      &:not(.bottom) {
        inset-block-start: var(--admin-bar-inset-size, 0);
      }

      admin-bar-button::part(popover) {
        max-width: 900px;
        max-height: calc(100dvh - calc(var(--admin-bar-height) * 2));
      }
    }
    /* Moves `<admin-bar>` to the bottom of the page when using `.fixed` or `.sticky`. */
    &.bottom {
      inset-inline: var(--admin-bar-inset-size, 0);
      inset-block-end: var(--admin-bar-inset-size, 0);
    }
    /* Fills the screen when Admin Bar is in vertical mode. */
    &.vertical-fullscreen {
      @container not style(--admin-bar-vertical: true) {
        &:not([vertical]) {
          /* Hide the toolbar toggle button when showing the full toolbar. */
          --admin-bar-toolbar-toggle-display: none;
        }
      }
      @container style(--admin-bar-vertical: true) {
        &::part(toolbar) {
          position: fixed;
          inset: var(--admin-bar-inset-size);
          --admin-bar-font-size: 1rem;
        }
      }
    }

    /* Avoid layout shift from happening before Admin Bar Component is registered. */
    &:not(:defined) {
      background: var(--admin-bar-bg-color);
      border-radius: var(--admin-bar-border-radius);
      opacity: 0.75;

      /* Hide all slot content until Admin Bar Component is registered. */
      & * {
        display: none;
      }
    }

    /* Opt into glass distortion effect on browsers that support SVG filtering and boolean style queries. */
    /*@supports (not (font: -apple-system-body)) and (not (-moz-appearance: none)) {*/
    /*  & {*/
    /*    --admin-bar-enable-glass: true;*/
    /*    --admin-bar-bg-filter: blur(2px) brightness(0.65) saturate(2.5);*/
    /*  }*/
    /*}*/
  }

  @media (prefers-reduced-motion) {
    admin-bar {
      /* Turns off transitions for users who do not want any animations. */
      --admin-bar-transition-duration: 0s;

      /* Darkens the background and increases the blur to simulate less motion. */
      --admin-bar-bg-filter: blur(26px) brightness(0.55) saturate(1.5);
    }
  }
  @media (prefers-reduced-transparency) {
    admin-bar {
      /* Reduces the amount of transparency in background colors for users who prefer more contrast.
         If `--admin-bar-bg` is set, these values will be overridden by the color chosen for `--admin-bar-bg`. */
      --admin-bar-bg-color: oklch(0 0 0 / 0.8);
    }
  }
}