@layer ui.layout {
  .control {
    --control-grid-template-areas: "input before label after";
    --control-grid-columns: auto auto 1fr auto;
    --control-gap: 1rem;

    display: grid;
    grid-template-areas: var(--control-grid-template-areas);
    grid-template-columns: var(--control-grid-columns);
    flex-grow: 1;
    column-gap: 0;
    align-items: center;

    &.inputEnd {
      --control-grid-template-areas: "before label after input";
      --control-grid-columns: auto 1fr auto auto;
    }

    &:has(> .controlDescription) {
      --control-grid-template-areas: "input before label after" "input before desc after";

      &.inputEnd {
        --control-grid-template-areas: "before label after input" "before desc after input";
      }
    }

    :global(label) {
      margin-bottom: 0;
    }
  }

  .input {
    grid-area: input;
    align-self: center;
    margin-inline-end: var(--control-gap);

    .inputEnd > & {
      margin-inline-start: var(--control-gap);
      margin-inline-end: 0;
    }
  }

  .spinner {
    --spinner-size: 1.25rem;

    grid-area: input;
    align-self: center;
    margin-inline-end: var(--control-gap);

    .inputEnd > & {
      margin-inline-start: var(--control-gap);
      margin-inline-end: 0;
    }
  }

  .controlLabel {
    cursor: var(--custom-cursor, pointer);

    grid-area: label;
    align-self: center;

    line-height: 1.25rem;
    overflow-wrap: anywhere;
  }

  .controlDescription {
    cursor: inherit;

    grid-area: desc;
    align-self: start;

    margin-top: 0.125rem;

    font-size: 0.875rem;
    line-height: 1rem;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
  }

  .controlBefore {
    grid-area: before;
    align-self: center;
    margin-inline-end: var(--control-gap);
  }

  .controlAfter {
    grid-area: after;
    align-self: center;
    margin-inline-start: var(--control-gap);
  }

  .controlIcon {
    --control-icon-background-color: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;

    color: var(--color-text);

    background-color: var(--control-icon-background-color);
    background-image: none;
  }

  .controlIconFilled {
    color: white;
    background-image: linear-gradient(180deg, rgb(255 255 255 / 30%) 0%, transparent 100%);
  }

  .controlIconGlyph {
    font-size: 1.25rem;
  }
}
