.c-segmented-control {
  display: flex;
  background: rgba(var(--color-primary-rgb), 0.75);
  padding: var(--spacing-1);
  border-radius: var(--radius-4);
  backdrop-filter: blur(24px);
  .control-item {
    border: none;
    background: transparent;
    color: var(--color-text-inverse-high);
    font-size: var(--font-size-4);
    font-weight: bold;
    flex: 1;
    padding-block: var(--spacing-3);
    padding-inline: var(--spacing-4);
    border-radius: var(--radius-3);
    text-decoration: none;
    text-align: center;
    &.is-active {
      background: var(--white-alpha-8);
      color: var(--color-text-primary);
      box-shadow: 0 2px 4px rgba(95, 45, 55, 0.1);
    }
  }
}
.segmented-content {
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
  height: 0;
  overflow: hidden;
  &.is-visible {
    visibility: visible;
    opacity: 1;
    height: auto;
    overflow: visible;
  }
}