.select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: var(--space-xs);

  .select-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    font-size: var(--font-sm);
    cursor: pointer;

    .select-label {
      color: var(--color-text);
    }
  }

  &.open .select-options {
    display: block;
  }

  .select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    margin-top: 4px;
    list-style: none;
    padding: var(--space-md) 0;
    z-index: 100;

    li {
      font-size: var(--font-sm);
      padding: var(--space-md) var(--space-lg);
      cursor: pointer;

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

      &[aria-selected="true"] {
        background-color: var(--color-primary-soft);
        color: var(--color-primary);
        font-weight: var(--font-medium);
      }

      &[aria-selected="true"]:hover {
        background-color: var(--color-primary-soft);
      }
    }
  }
}