:host {
  display: inline-flex;

  .ld-label {
    width: 100%;
  }
}

.ld-label {
  /* layout */
  --ld-label-column-gap: 0.625rem;
  --ld-label-row-gap: var(--ld-sp-6);

  /* colors */
  --ld-label-col: var(--ld-col-neutral-900);
  --ld-label-disabled-col: var(--ld-col-neutral-300);

  color: var(--ld-label-col);
  font: var(--ld-typo-label-s);
  display: inline-grid;
  gap: var(--ld-label-row-gap) 0;
  max-width: 100%;
  align-content: flex-start;
}

.ld-label--left,
.ld-label--right {
  justify-content: flex-start;
  align-items: center;
  gap: 0 var(--ld-label-column-gap);

  > ::slotted(.ld-checkbox),
  > .ld-checkbox,
  > ::slotted(.ld-radio),
  > .ld-radio,
  > ::slotted(.ld-toggle),
  > .ld-toggle,
  > ::slotted(.ld-input),
  > .ld-input,
  > ::slotted(.ld-select),
  > .ld-select {
    grid-area: input;
    align-self: baseline;
  }

  > ::slotted(.ld-input-message),
  > .ld-input-message {
    grid-area: message;
    margin-top: var(--ld-sp-4);
  }
}

.ld-label--align-message {
  &.ld-label--left {
    > ::slotted(.ld-input-message),
    > .ld-input-message {
      grid-column-start: 2;
    }
  }

  &.ld-label--right {
    > ::slotted(.ld-input-message),
    > .ld-input-message {
      grid-column-end: 2;
    }
  }
}

.ld-label--left {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'label input'
    'message message';
}

.ld-label--right {
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'input label'
    'message message';
}

.ld-label--m {
  font: var(--ld-typo-label-m);
  line-height: 1;
}
