/* Icon */
[ui-icon] {
  flex-shrink: 0;
  overflow: hidden;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: var(--icon-size) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
[ui-icon][filled] {
    font-variation-settings:
      "FILL" 1,
      "wght" 400,
      "GRAD" 0,
      "opsz" 24;
  }
[ui-icon][flip-in-rtl]:dir(rtl) {
    rotate: 180deg;
  }

/* Button */
[ui-button] {
  border: none;
  cursor: pointer;
  text-decoration: none;
  outline-offset: 1px;
  outline: 2px solid transparent;
  font: var(--font-body-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  justify-content: center;
  transition: var(--transition-standard-default-effects);
}
[ui-button][data-variant="primary"] {
    color: var(--color-on-primary);
    background-color: var(--color-primary);
  }
[ui-button][data-variant="primary"]:hover:not(:disabled) {
      background-color: color-mix(in srgb, var(--color-primary), currentColor 8%);
    }
[ui-button][data-variant="secondary"] {
    color: var(--color-on-background);
    background-color: var(--color-surface-container-low);
  }
[ui-button][data-variant="secondary"]:hover:not(:disabled) {
      background-color: var(--color-surface-container-highest);
    }
[ui-button][data-variant="tertiary"] {
    color: var(--color-on-background);
    background-color: var(--color-surface-container-high);
  }
[ui-button][data-variant="tertiary"]:hover:not(:disabled) {
      background-color: var(--color-surface-container-highest);
    }
[ui-button][data-variant="ghost"] {
    color: var(--color-on-background);
    background-color: transparent;
  }
[ui-button][data-variant="ghost"]:hover:not(:disabled) {
      background-color: var(--color-surface-container-highest);
    }
[ui-button][data-size="lg"] {
    height: 56px;
    gap: var(--spacing-12);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing-24) - var(--spacing-2));
  }
[ui-button][data-size="lg"][as-icon] {
      width: 56px;
    }
[ui-button][data-size="md"] {
    height: 44px;
    border-radius: var(--radius-sm);
    padding-inline: var(--spacing-16);
  }
[ui-button][data-size="md"][as-icon] {
      width: 44px;
    }
[ui-button][data-size="md"][as-icon] [ui-icon] {
        --icon-size: 24px !important;
      }
[ui-button][data-size="sm"] {
    height: 32px;
    border-radius: var(--radius-sm);
    padding-inline: var(--spacing-12);
  }
[ui-button][data-size="sm"][as-icon] {
      width: 32px;
    }
[ui-button][data-size="sm"][as-icon] [ui-icon] {
        --icon-size: 20px !important;
      }
[ui-button][data-size="xs"] {
    width: 24px;
    border-radius: var(--radius-xs);
    padding-inline: var(--spacing-4);
  }
[ui-button][data-size="xs"][as-icon] {
      height: 24px;
    }
[ui-button][data-size="xs"][as-icon] [ui-icon] {
        --icon-size: 18px !important;
      }
[ui-button][data-size="xxs"] {
    width: 16px;
    border-radius: var(--radius-xs);
    padding-inline: var(--spacing-4);
  }
[ui-button][data-size="xxs"][as-icon] {
      height: 16px;
    }
[ui-button][data-size="xxs"][as-icon] [ui-icon] {
        --icon-size: 16px !important;
      }
[ui-button]:active:not(:disabled) {
    scale: 0.98;
  }
[ui-button][as-icon]:active:not(:disabled) {
      scale: 0.95;
    }
[ui-button][data-disabled] {
    pointer-events: none;
  }
[ui-button][data-loading] {
    overflow: hidden;
    position: relative;
    pointer-events: none;
  }
[ui-button][data-loading]::before {
      content: "" !important;
      inset: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: var(--color-surface-container);
    }
[ui-button][data-loading]::after {
      content: "";
      width: 12px;
      height: 12px;
      position: absolute;
      border-radius: var(--radius-rounded);
      border: 1.5px solid var(--color-outline);
      border-block-end-color: transparent;
      animation: spin 1s linear infinite;
    }
[ui-button]:disabled,[ui-button][data-disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
[ui-button]:focus-visible {
    outline-color: var(--color-on-background);
  }

/* Link */
[ui-link] {
  width: fit-content;
  height: fit-content;
  position: relative;
  text-decoration: none;
  outline-offset: 1px;
  outline: 2px solid transparent;
}
[ui-link]:not(:has(img))::before {
    content: "";
    width: 0%;
    height: 1px;
    position: absolute;
    inset-block-end: -1px;
    background-color: var(--color-on-background);
    transition: var(--transition-expressive-default-spatial);
  }
[ui-link]:hover::before {
    width: 100%;
  }
[ui-link][ui-link="secondary"]::before {
      width: 100%;
    }
[ui-link][ui-link="secondary"]:hover::before {
      width: 25%;
    }
[ui-link]:focus-visible {
    outline-color: var(--color-on-background);
  }

/* Theme */
ui-theme {
  display: flex;
}
ui-theme > input {
    width: 30px;
    height: 20px;
    cursor: pointer;
    appearance: none;
    position: relative;
    padding: var(--spacing-6);
    border-radius: var(--radius-rounded);
    background-color: var(--color-surface-container);
    transition: var(--transition-standard-default-effects);
    outline-offset: 1px;
    outline: 2px solid transparent;
  }
:is(ui-theme > input)::before {
      content: "";
      width: 8px;
      height: 8px;
      position: absolute;
      clip-path: circle();
      inset-inline-start: var(--spacing-6);
      background-color: var(--color-on-background);
      transition: var(--transition-expressive-fast-spatial);
    }
:is(ui-theme > input):hover:not(:active) {
      background-color: var(--color-surface-container-highest);
    }
:is(ui-theme > input):checked::before {
      inset-inline-start: calc(100% - 14px);
    }
:is(ui-theme > input):focus-visible {
      outline-color: var(--color-on-background);
    }

/* Loader */
[ui-loader] {
  inset: 0;
  z-index: 100;
  position: fixed;
  overflow: hidden;
  background-color: var(--color-loader);
  transition: var(--transition-expressive-default-spatial);
}
[ui-loader]::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    transform: translateX(-100%);
    backdrop-filter: blur(10px);
    background: linear-gradient(90deg, transparent, var(--color-on-loader), transparent);
    animation: skeleton-loading 1s infinite;
  }

@keyframes skeleton-loading {
  100% {
    transform: translateX(100%);
  }
}

/* Empty */
[ui-empty] {
  text-align: center;
  padding: var(--spacing-64);
}
[ui-empty] span {
    opacity: 0.8;
  }

/* Hidden */
[hidden] {
  display: none !important;
}

/* Skip to main content */
[ui-skip-to-content] {
  left: 50%;
  opacity: 0;
  z-index: 1000;
  position: fixed;
  padding: 16px 24px;
  transform: translateX(-50%);
  inset-block-start: -64px;
  border-radius: var(--radius-md);
  color: var(--color-on-background);
  background-color: var(--color-surface-container);
  transition: var(--transition-expressive-default-spatial);
  outline: none;
  border: 1px solid transparent;
}
[ui-skip-to-content]:focus-visible {
    opacity: 1;
    inset-block-start: var(--spacing-12);
    border-color: var(--color-surface-container-highest);
  }