/* stylelint-disable selector-class-pattern */
@use 'pix-design-tokens/typography';

.certification-center-information {

  &__edit-title{
    @extend %pix-title-s;

    padding-bottom: var(--pix-spacing-4x);
  }

  &__edit-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: fit-content;
  }

  .field-label {
    display: block;
    color: var(--pix-neutral-900);
    font-weight: var(--pix-font-medium);
    font-size: 1rem;
  }

  .label {
    display: block;
    color: var(--pix-neutral-800);
    font-weight: normal;
    font-size: 0.875rem;
  }

  &__edit-form__habilitations-checkbox-list {
    display: flex;
    flex-direction: column;
    margin: 8px 0;
    padding: 0;
    list-style-type: none;

    .habilitation-entry {
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      padding-bottom: 8px;

      * {
        align-self: center;
        margin-bottom: 0;
      }

      input[type='checkbox'] {
        width: 1rem;
        height: 1rem;
      }
    }
  }

  &__action-buttons {
    display: flex;
    gap: 8px;
    padding-top: var(--pix-spacing-6x);
  }
}

.certification-center-information-display {

  &__archived-warning {
    max-width: fit-content
  }

  &__action-buttons {
    display: flex;
    gap: 8px;
    padding-top: var(--pix-spacing-6x);
  }

  &__name {
    @extend %pix-title-s;
  }

  &__habilitations-list {
    display: inline-flex;
    gap: 24px;
    margin: 8px 0;

    li {
      align-items: center;
      display: flex;
      padding: 8px 16px;
      background-color: var(--pix-neutral-20);
      border-radius: 8px;
    }

    .habilitation-icon {
      height: 1.4rem;
      margin-right: var(--pix-spacing-2x);
      width: 1.4rem;

      &--granted {
        fill: var(--pix-success-700);
      }

      &--non-granted {
        fill: var(--pix-neutral-500);
      }
    }
  }

  &__list {
    display: grid;
    grid-template-columns: 170px auto;
    padding: var(--pix-spacing-4x) 0 var(--pix-spacing-2x) 0;

    dd, dt {
      display: flex;
      align-items: center;
      padding: var(--pix-spacing-2x) 0;
      border-bottom: 0.05rem solid var(--pix-neutral-100);
    }
  }
}

.certification-center-confirmation-modal {
  &__list {
    margin:var(--pix-spacing-4x) var(--pix-spacing-4x) 0;
    list-style-type: disc;
  }

  &__warning {
    padding-top: var(--pix-spacing-3x);
    font-weight: 900;
  }
}
