/**
* c-form
*/
@import url('../../styles/variables.css');

.c-form {
  font-size: var(--form-font-md);

  &.is-xs {
    font-size: var(--form-font-xs);

    & .c-form-item__label,
    & .c-form-item__control {
      line-height: var(--form-height-xs);
    }
  }

  &.is-sm {
    font-size: var(--form-font-sm);

    & .c-form-item__label,
    & .c-form-item__control {
      line-height: var(--form-height-sm);
    }
  }

  &.is-lg {
    font-size: var(--form-font-lg);

    & .c-form-item__label,
    & .c-form-item__control {
      line-height: var(--form-height-lg);
    }
  }

  &.is-xl {
    font-size: var(--form-font-xl);

    & .c-form-item__label,
    & .c-form-item__control {
      line-height: var(--form-height-xl);
    }
  }
}

.c-form-item {
  margin-bottom: 0.5em;
  display: flex;
  align-items: flex-start;

  & .c-form-item__label {
    display: block;
    flex-shrink: 0;
    width: 4em;
    text-align: right;
    margin-right: 0.5em;
    line-height: var(--form-height-md);
  }

  &.is-required .c-form-item__label::before {
    content: '*';
    color: var(--danger-color);
    padding-right: 0.3em;
  }

  & .c-form-item__control {
    flex: 1 0 auto;
    flex-basis: content;
    line-height: var(--form-height-md);
  }

  & .c-form-item__error {
    min-height: 1.5em;
    line-height: 1.2;
    padding-top: 0.3em;
    font-size: 0.866em;
    color: var(--danger-color);
    opacity: 0;
    transition: all 0.2s ease;
    transform: translateY(-30%);
  }

  & .has-error .c-form-item__error {
    opacity: 1;
    transform: translateY(0);
  }

  & .c-error-msg {
    display: none;
  }

  &.is-flex {
    display: flex;

    & .c-form-item__control {
      flex-grow: 1;
    }
  }
}

.c-form--inline {
  display: flex;

  & .c-form-item {
    &:not(:last-child) {
      margin-right: 1em;
    }

    & .c-form-item__label {
      width: auto;
    }
  }

  & .c-form-item__error {
    display: none;
  }

  & .has-error .c-form-item__error {
    display: block;
  }
}

.c-error-msg {
  color: var(--danger-color);
  margin-left: 0.2em;
  font-style: normal;
}