@use '../abstracts' as *;

/* Organism - modal */
.o-modal-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: toRem(480);
  max-height: 95%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: toRem(18) toRem(26) toRem(36) toRem(26);
  transform: translate(-50%, -50%);
}

.o-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 auto;
  &__top {
    display: flex;
    margin-bottom: toRem(25);

    &__title {
      flex: 1;
      padding-top: toRem(7);
      padding-right: toRem(25);
    }
    &__close {
      .a-btn {
        margin-top: toRem(9);
      }
    }
  }

  .o-yap-stepper__content {
    yap-step {
      &.active-step {
        position: relative;
      }
    }
  }

  .m-btn-group {
    padding-top: toRem(15);
  }

  // Version of modal with a filter/selector OR item creator (ex. admin/classes/nouvel attribut)
  &--selector {
    .m-form-label-field.selector {
      position: relative;
      // Color layer behind field
      &:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: toRem(-300);
        bottom: toRem(-25);
        left: toRem(-30);
        right: toRem(-30);
      }
    }

    .a-table {
      tbody tr td {
        padding: toRem(5);
      }
      .a-btn--ghost.select-it {
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: toRem(10) toRem(2);
        @include outlineOnFocus($border-radius: 2px);
      }
    }

    .a-p--create {
      margin-top: toRem(15);
      padding-bottom: toRem(10);
      line-height: toRem(21);
      + .a-btn {
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}