.appearance-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--op-space-medium);
  grid-column: 1 / 3;
  max-inline-size: var(--op-breakpoint-x-small);

  .appearance-control__option {
    aspect-ratio: 1 / 1;
    padding: var(--op-space-small);
    border-radius: var(--op-radius-large);
    box-shadow: var(--op-border-all) var(--op-color-border);
    font-weight: var(--op-font-weight-semi-bold);
    font-size: var(--op-font-size-medium);

    &.appearance-control__option--light {
      background-color: var(--op-color-white);
      color: var(--op-color-black);
    }

    &.appearance-control__option--dark {
      background-color: var(--op-color-black);
      color: var(--op-color-white);
    }

    &.appearance-control__option--system {
      background-image: linear-gradient(
        135deg,
        var(--op-color-neutral-minus-max),
        var(--op-color-neutral-plus-max)
      );
      color: var(--op-color-white);
    }

    &.appearance-control__option--active {
      box-shadow: inset 0 0 0 var(--op-border-width-x-large) var(--op-color-primary-base);
    }
  }
}