@layer components {
  .theme-picker {
    position: relative;
    display: inline-block;

    .theme-picker__button {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.375rem 0.75rem;
      font-size: var(--text-small);
      border: 1px solid var(--color-border);
      border-radius: 0.375rem;
      background-color: var(--color-bg-white);
      color: var(--color-text);
      cursor: pointer;
      transition: all 0.15s ease-in-out;

      &:hover {
        background-color: var(--color-bg-light);
        border-color: var(--color-border-hover);
      }

      svg {
        width: 1rem;
        height: 1rem;
      }
    }

    .theme-picker__dropdown {
      position: absolute;
      bottom: calc(100% + 0.5rem);
      left: 50%;
      transform: translateX(-50%);
      min-width: 10rem;
      padding: 0.5rem 0;
      background-color: var(--color-bg-white);
      border: 1px solid var(--color-border);
      border-radius: 0.375rem;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      z-index: var(--z-page);

      &.hidden {
        display: none;
      }
    }

    .theme-picker__option {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.5rem 1rem;
      font-size: var(--text-small);
      background: none;
      border: none;
      color: var(--color-text);
      cursor: pointer;
      text-align: left;
      transition: background-color 0.15s ease-in-out;

      &:hover {
        background-color: var(--color-bg-light);
      }

      svg {
        width: 1rem;
        height: 1rem;
      }
    }
  }
}