.toggle-container {
    display: flex;
    width: fit-content;
    background: var(--color-alloy);
    padding: 4px;
    border-radius: 50px;
}

.toggle-container--dark, .dark-section .toggle-container {
    display: flex;
    width: fit-content;
    background: var(--color-charcoal);
    padding: 4px;
    border-radius: 50px;
}

.toggle-option {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    cursor: pointer;
    min-width: 110px;
    padding: var(--space-sm);
    color: var(--color-graphite);
    background: var(--color-alloy);
    border-radius: 50px;
    transition: background .25s ease, color .25s ease;
    font-weight: var(--text-weight-medium);
    font-size: var(--text-size-sm);
}

.toggle-container--dark .toggle-option, .dark-section .toggle-container .toggle-option:not([selected]) {
    background: var(--color-charcoal);
    color: var(--color-stainless);
}

.toggle-option[selected] {
    padding: var(--space-sm);
    color: var(--color-alloy-lighter);
    background: var(--color-water);
    font-weight: 600;
}

@media(max-width: 576px) {
    .toggle-option {
      font-size: .7rem;
      padding: .4rem;
      min-width: auto;
      height: 30px;
    }
  }