.options {
  position: relative;
  display: grid;

  border-radius: var(--radius-max);

  background-color: var(--gray-3);

  .indicator {
    position: absolute;
    top: 0;
    height: 100%;

    background-color: var(--accent-3);
    outline: var(--outline-focus);
    border-radius: var(--radius-max);

    transition: var(--duration-brief);
  }

  .option {
    position: relative;

    display: flex;
    justify-content: center;

    padding: var(--space-3) var(--space-4);

    color: var(--gray-11);
    cursor: pointer;

    input {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: 0;
      opacity: 0;
    }

    .label {
      white-space: nowrap;
    }

    &:has(input:checked) {
      color: var(--gray-12);
    }

    &:has(input:focus-visible) {
      outline: 2px solid var(--accent-8);
      outline-offset: 2px;
      border-radius: var(--radius-max);
    }
  }
}