.docs-pick-theme {
  --docs-pick-theme-icon-size: 1.25rem;
}

.docs-pick-theme__fieldset {
  border: 0;
}

.docs-pick-theme ld-icon {
  width: var(--docs-pick-theme-icon-size);
  height: var(--docs-pick-theme-icon-size);
}

.docs-pick-theme__select {
  &::part(trigger-text-wrapper) {
    display: none;
  }

  &::part(btn-trigger) {
    padding: var(--ld-sp-6);
  }
}

.docs-pick-theme__select,
.docs-pick-theme__select::part(select),
.docs-pick-theme__select::part(btn-trigger) {
  height: var(--ld-sp-32);
  width: var(--ld-sp-32);
}

.docs-pick-theme__popper {
  min-width: 14rem;
}

.docs-pick-theme__option-pattern {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
}

.docs-pick-theme__option {
  &::part(option) {
    font-weight: 700;
    overflow: hidden;
  }

  &.ld-theme-ocean {
    &::part(check) {
      color: var(--ld-thm-ocean-primary);
    }

    &::part(option) {
      color: var(--ld-thm-ocean-primary);

      @media (hover: hover) {
        &:hover {
          color: var(--ld-thm-ocean-primary-hover);
          background-color: var(--ld-col-rb-010);
        }
      }
      &:focus:focus-visible {
        color: var(--ld-col-rb-800);
        background-color: var(--ld-col-rb-010);

        &::before {
          box-shadow: inset 0 0 0 var(--ld-sp-1)
            var(--ld-thm-ocean-primary-focus);
        }
      }
    }

    .docs-pick-theme__option-pattern-primary {
      fill: var(--ld-thm-ocean-primary);
    }
    .docs-pick-theme__option-pattern-accent {
      fill: var(--ld-thm-ocean-secondary);
    }

    &.ld-option-internal--hover-within {
      .docs-pick-theme__option-pattern-primary {
        fill: var(--ld-thm-ocean-primary-hover);
      }
      .docs-pick-theme__option-pattern-accent {
        fill: var(--ld-thm-ocean-secondary-hover);
      }
      &::part(check) {
        color: var(--ld-thm-ocean-primary-hover);
      }
    }

    &.ld-option-internal--focus-within:focus-visible {
      .docs-pick-theme__option-pattern-primary {
        fill: var(--ld-thm-ocean-primary-focus);
      }
      .docs-pick-theme__option-pattern-accent {
        fill: var(--ld-thm-ocean-secondary-focus);
      }
      &::part(check) {
        color: var(--ld-col-rb-800);
      }
    }
  }

  &.ld-theme-bubblegum {
    &::part(check) {
      color: var(--ld-thm-bubblegum-primary);
    }

    &::part(option) {
      color: var(--ld-thm-bubblegum-primary);

      @media (hover: hover) {
        &:hover {
          color: var(--ld-thm-bubblegum-primary-hover);
          background-color: var(--ld-col-rp-010);
        }
      }
      &:focus:focus-visible {
        color: var(--ld-col-rp-900);
        background-color: var(--ld-col-rp-010);

        &::before {
          box-shadow: inset 0 0 0 var(--ld-sp-1)
            var(--ld-thm-bubblegum-primary-focus);
        }
      }
    }

    .docs-pick-theme__option-pattern-primary {
      fill: var(--ld-thm-bubblegum-primary);
    }
    .docs-pick-theme__option-pattern-accent {
      fill: var(--ld-thm-bubblegum-secondary);
    }

    &.ld-option-internal--hover-within {
      .docs-pick-theme__option-pattern-primary {
        fill: var(--ld-thm-bubblegum-primary-hover);
      }
      .docs-pick-theme__option-pattern-accent {
        fill: var(--ld-thm-bubblegum-secondary-hover);
      }
      &::part(check) {
        color: var(--ld-thm-bubblegum-primary-hover);
      }
    }

    &.ld-option-internal--focus-within:focus-visible {
      .docs-pick-theme__option-pattern-primary {
        fill: var(--ld-thm-bubblegum-primary-focus);
      }
      .docs-pick-theme__option-pattern-accent {
        fill: var(--ld-thm-bubblegum-primary-focus);
      }
      &::part(check) {
        color: var(--ld-col-rp-900);
      }
    }
  }

  &.ld-theme-shake {
    &::part(check) {
      color: var(--ld-thm-shake-primary);
    }

    &::part(option) {
      color: var(--ld-thm-shake-primary);

      @media (hover: hover) {
        &:hover {
          color: var(--ld-thm-shake-primary-hover);
          background-color: var(--ld-col-rp-010);
        }
      }
      &:focus:focus-visible {
        color: var(--ld-col-rp-900);
        background-color: var(--ld-col-rp-010);

        &::before {
          box-shadow: inset 0 0 0 var(--ld-sp-1)
            var(--ld-thm-shake-primary-focus);
        }
      }
    }

    .docs-pick-theme__option-pattern-primary {
      fill: var(--ld-thm-shake-primary);
    }
    .docs-pick-theme__option-pattern-accent {
      fill: var(--ld-thm-shake-secondary);
    }

    &.ld-option-internal--hover-within {
      .docs-pick-theme__option-pattern-primary {
        fill: var(--ld-thm-shake-primary-hover);
      }
      .docs-pick-theme__option-pattern-accent {
        fill: var(--ld-thm-shake-secondary-hover);
      }
      &::part(check) {
        color: var(--ld-thm-shake-primary-hover);
      }
    }

    &.ld-option-internal--focus-within:focus-visible {
      .docs-pick-theme__option-pattern-primary {
        fill: var(--ld-thm-shake-primary-focus);
      }
      .docs-pick-theme__option-pattern-accent {
        fill: var(--ld-thm-shake-secondary-focus);
      }
      &::part(check) {
        color: var(--ld-col-rp-900);
      }
    }
  }

  &.ld-theme-solvent {
    &::part(check) {
      color: var(--ld-thm-solvent-primary);
    }

    &::part(option) {
      color: var(--ld-thm-solvent-primary);

      @media (hover: hover) {
        &:hover {
          color: var(--ld-thm-solvent-primary-hover);
          background-color: var(--ld-col-rp-010);
        }
      }
      &:focus:focus-visible {
        color: var(--ld-col-rp-900);
        background-color: var(--ld-col-rp-010);

        &::before {
          box-shadow: inset 0 0 0 var(--ld-sp-1)
            var(--ld-thm-solvent-primary-focus);
        }
      }
    }

    .docs-pick-theme__option-pattern-primary {
      fill: var(--ld-thm-solvent-primary);
    }
    .docs-pick-theme__option-pattern-accent {
      fill: var(--ld-thm-solvent-secondary);
    }

    &.ld-option-internal--hover-within {
      .docs-pick-theme__option-pattern-primary {
        fill: var(--ld-thm-solvent-primary-hover);
      }
      .docs-pick-theme__option-pattern-accent {
        fill: var(--ld-thm-solvent-secondary-hover);
      }
      &::part(check) {
        color: var(--ld-thm-solvent-primary-hover);
      }
    }

    &.ld-option-internal--focus-within:focus-visible {
      .docs-pick-theme__option-pattern-primary {
        fill: var(--ld-thm-solvent-primary-focus);
      }
      .docs-pick-theme__option-pattern-accent {
        fill: var(--ld-thm-solvent-primary-focus);
      }
      &::part(check) {
        color: var(--ld-col-rp-900);
      }
    }
  }

  &.ld-theme-tea {
    &::part(check) {
      color: var(--ld-thm-tea-primary);
    }

    &::part(option) {
      color: var(--ld-thm-tea-primary);

      @media (hover: hover) {
        &:hover {
          color: var(--ld-thm-tea-primary-hover);
          background-color: var(--ld-col-rg-010);
        }
      }
      &:focus:focus-visible {
        color: var(--ld-col-rg-900);
        background-color: var(--ld-col-rg-010);

        &::before {
          box-shadow: inset 0 0 0 var(--ld-sp-1) var(--ld-thm-tea-primary-focus);
        }
      }
    }

    .docs-pick-theme__option-pattern-primary {
      fill: var(--ld-thm-tea-primary);
    }
    .docs-pick-theme__option-pattern-accent {
      fill: var(--ld-thm-tea-secondary);
    }

    &.ld-option-internal--hover-within {
      .docs-pick-theme__option-pattern-primary {
        fill: var(--ld-thm-tea-primary-hover);
      }
      .docs-pick-theme__option-pattern-accent {
        fill: var(--ld-thm-tea-secondary-hover);
      }
      &::part(check) {
        color: var(--ld-thm-tea-primary-hover);
      }
    }

    &.ld-option-internal--focus-within:focus-visible {
      .docs-pick-theme__option-pattern-primary {
        fill: var(--ld-thm-tea-primary-focus);
      }
      .docs-pick-theme__option-pattern-accent {
        fill: var(--ld-thm-tea-secondary-focus);
      }
      &::part(check) {
        color: var(--ld-col-rg-900);
      }
    }
  }
}
