@import 'mixins/list';
@import 'variables/gutters';

.employee-form {
  position: relative;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__block {
    max-width: var(--digi--typography--text--max-width);
  }

  &__input {
    display: block;
    width: 100%;
    margin-bottom: var(--digi--layout--gutter);
  }

  &__fieldset {
    padding: 0;
    border: 0;

    legend {
      width: 100%;
      display: flex;
      align-items: center;
      font-weight: var(--digi--typography--font-weight--semibold);
      font-size: var(--digi--typography--font-size--h2--desktop);
      margin-bottom: var(--digi-typography--margin--h2);
    }
  }

  &__validation-message {
    display: block;
    margin-top: var(--digi--layout--gutter--s);
  }

  &__services,
  &__authorizations {
    @include msfa__reset-list;
    margin-bottom: var(--digi--layout--gutter);
  }

  &__authorization-item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 'auth-checkbox read-more';
  }

  &__service-item {
    display: flex;
    align-items: center;

    &:not(:first-child) {
      margin-top: var(--digi--layout--gutter);
    }
  }

  &__error-list {
    display: block;
    margin-top: $digi--layout--gutter--l;
  }

  &__footer {
    margin-top: $digi--layout--gutter--xl;
    display: flex;
    gap: var(--digi--layout--gutter);
  }

  &__digi-checkbox {
    grid-area: auth-checkbox;
    align-self: center;
    padding: 0.5rem 0;
  }

  &__read-more {
    grid-area: read-more;
    align-self: center;
  }
}
