.select {
  display: flex;
  align-items: center;
  min-height: 40px;
  width: 100%;
  min-width: 112px;
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  color: var(--color-text-1);
  border: 1px solid var(--color-border-1);
  background-color: var(--color-bg-0);
  cursor: pointer;

  &:hover,
  &:focus {
    border: 1px solid var(--color-primary);
  }

  &,
  &::picker(select) {
    appearance: base-select;
  }

  &::picker(select) {
    border: none;
  }

  &::picker-icon {
    color: var(--color-text-2);
    transition: 0.3s rotate;
  }

  &:open::picker-icon {
    rotate: 180deg;
  }
}

.option {
  display: flex;
  align-items: center;
  padding: 0 8px;
  height: 40px;
  border-left: 1px solid var(--color-border-1);
  border-right: 1px solid var(--color-border-1);
  background-color: var(--color-bg-0);

  &:first-of-type {
    border-radius: 8px 8px 0 0;
    border-top: 1px solid var(--color-border-1);
  }

  &:last-of-type {
    border-radius: 0 0 8px 8px;
    border-bottom: 1px solid var(--color-border-1);
  }

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

  &:checked {
    color: var(--color-primary);
  }

  &:disabled {
    cursor: not-allowed;
  }
}
