@layer components {
  .admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    margin-inline: auto;
  }

  .admin-form__field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm-x3);
  }

  .admin-form__label {
    font-weight: var(--font-weight-semi-bold);
  }

  .admin-form__label--checkbox {
    display: flex;
    gap: var(--space-sm-x1);
  }

  .admin-form__control {
    width: min(98%, var(--length-96));
    background-color: var(--color-white);
    border-radius: var(--border-radius-2);
    border: var(--border-width-2) solid var(--color-primary-1);
    padding: var(--space-sm-x3) var(--space-sm-x2);

    &:hover,
    &:focus {
      border-color: var(--color-primary-2);
    }

    &:active {
      border-color: var(--color-primary-3);
    }
  }

  select.admin-form__control {
    cursor: pointer;
  }

  textarea.admin-form__control {
    width: 100%;
  }

  .admin-form__control--error {
    border-color: var(--color-primary-4);
  }

  .admin-form__error {
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-primary-6);
  }

  .admin-form__footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm-x1);
    margin-block-start: var(--space-lg-x2);
  }

  .admin-form__cancel {
    font-size: var(--font-size-sm-x1);
    color: var(--color-primary-7);
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-5);
    }
  }
}