/* ==========================================================================
 * Control Group
 * ========================================================================== */

.mds-c-control-group {
  --mds-v-control-group__color--primary: var(--mds-t-text-color--primary);
  --mds-v-control-group__color--muted: var(--mds-t-text-color--tertiary);
  --mds-v-control-group__color--danger: var(--mds-t-text-color--danger);

  display: flex;
  flex-direction: column;

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--xl);
  }
}

.mds-c-control-group-contiguous {
  &:not(:last-child) {
    margin-bottom: auto;
  }
}

.mds-c-control-group-has-changes {
  background-color: var(--mds-t-background-color--changes-muted);
}

.mds-c-control-group--inline {
  display: grid;
  grid-column-gap: var(--mds-d-spacing--med);
  grid-template-areas:
    'label label'
    'control buttons'
    'help help';
  grid-template-columns: 1fr auto;
}

.mds-c-control-group--inline-reverse {
  display: grid;
  grid-column-gap: var(--mds-d-spacing--med);
  grid-template-areas:
    'label label'
    'buttons control';
  grid-template-columns: auto 1fr;
}

.mds-c-control-group--inline-label {
  display: grid;
  grid-column-gap: var(--mds-d-spacing--med);
  grid-template-areas:
    'label buttons'
    'control control';
  grid-template-columns: 1fr auto;
}

.mds-c-control-group--inline-label-reverse {
  display: grid;
  grid-column-gap: var(--mds-d-spacing--med);
  grid-template-areas:
    'buttons label'
    'control control';
  grid-template-columns: auto 1fr;
}

.mds-c-control-group__buttons {
  grid-area: buttons;
}

.mds-c-input,
.mds-c-select,
.mds-c-textarea {
  grid-area: control;
}

.mds-c-control-group__controls {
  display: flex;
  grid-area: control;

  > .mds-c-input {
    margin-top: 0;
  }

  > .mds-c-control-group {
    flex-grow: 1;
    margin-bottom: 0;
    margin-top: 0;

    &:not(:last-child) {
      margin-right: var(--mds-d-spacing--med);
    }
  }

  &--timepicker {
    > .mds-c-control-group:last-child {
      flex-grow: 0;
    }
  }
}

.mds-c-control-group--floating-label {
  > .mds-c-input,
  > .mds-c-select,
  > .mds-c-textarea {
    margin: 0;
  }

  > .mds-c-control-group__controls {
    > .mds-c-input,
    > .mds-c-select,
    > .mds-c-textarea {
      margin: 0;
    }
  }
}

.mds-c-control-group__label {
  @mixin mds-m-label--size-med;

  color: var(--mds-v-control-group__color--primary);
  grid-area: label;
  margin-bottom: 0;
  order: -1;
  padding-bottom: var(--mds-d-spacing--xs);
  pointer-events: none;

  &.mds-is-visually-hidden {
    @mixin mds-m-screenreader-text;
  }

  .mds-c-control-group--floating-label > & {
    max-height: 100px;
    opacity: 1;
    overflow: hidden;
    padding-bottom: var(--mds-d-spacing--xs);
    transform: translateY(0);
    transition:
      max-height 0.2s ease-in-out,
      opacity 0.2s ease-in-out,
      padding-bottom 0.2s ease-in-out,
      transform 0.2s ease-in-out;

    &.mds-is-visually-hidden {
      /* Override screenreader-text mixin for floating labels to allow smooth animation */
      clip: auto;
      height: auto;
      margin: 0;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      padding-bottom: 0;
      position: static;
      transform: translateY(-4px);
      width: auto;
    }
  }

  .mds-has-error ~ &,
  .mds-c-control-group.mds-has-error & {
    color: var(--mds-v-control-group__color--danger);
  }

  /* stylelint-disable */
  .mds-c-control-group--required > &,
  .mds-is-required ~ &,
  .mds-c-input[required] ~ &,
  .mds-c-select[required] ~ &,
  .mds-c-textarea[required] ~ & {
    &::after {
      content: ' *';
    }
  }
  /* stylelint-enable */
}

.mds-c-control-group__help-text {
  @mixin mds-m-text--size-sm;

  color: var(--mds-v-control-group__color--muted);
  display: block;
  grid-area: help;
  margin-top: var(--mds-d-spacing--xs);
  overflow-wrap: break-word;
  position: relative;

  .mds-c-control-group--inline &,
  .mds-c-control-group--inline-reverse & {
    grid-column: 1 / -1;
  }

  .mds-has-error ~ &,
  .mds-c-control-group.mds-has-error & {
    color: var(--mds-v-control-group__color--danger);
  }
}