.segmented-control {
  align-items: center;
  background: var(--surface-2);
  border-radius: var(--radius-2);
  display: inline-flex;
  overflow: hidden;

  & > a {
    color: var(--text-2);
    padding-block: var(--size-1);
    padding-inline: var(--size-3);
    text-decoration: none;
  }

  & > a:first-child {
    border-radius: var(--radius-2) 0 0 var(--radius-2);
  }

  & > a:last-child {
    border-radius: 0 var(--radius-2) var(--radius-2) 0;
  }

  & > a.active {
    background: var(--surface-1);
    box-shadow:
      inset 0 0 0 var(--border-size-1) var(--surface-3),
      var(--shadow-1);
    color: var(--text-1);
  }
}