@use '../abstracts' as *;

/* Organism - settings (table, map, etc...) */

.o-settings {
  .a-btn.a-btn--icon-only.-settings {
    margin-right: toRem(5);
  }

  &__popup {
    position: fixed;
    z-index: 1000;
    top: 64px;
    bottom: 0;
    left: 70%;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: toRem(20);

      .a-h2 {
        padding-bottom: 0;
      }
    }

    &__content {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      width: 100%;
      padding: toRem(20);

      &__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 0 0 toRem(30) 0;

        &.-has-separator {
          margin-top: toRem(25);
          padding-top: toRem(20);
          border-top-width: toRem(2);
          border-top-style: solid;
        }
      }

      &__fields {
        margin-bottom: toRem(30);
        padding-bottom: toRem(30);

        &:not(:last-child) {
          border-bottom-width: toRem(1);
          border-bottom-style: solid;
        }

        &__head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: toRem(20);

          .a-h3 {
            padding-bottom: 0;
            padding-right: toRem(25);
          }
        }

        .m-form-label-field.-has-separator {
          margin-top: toRem(25);
          padding-top: toRem(20);
          border-top-width: toRem(2);
          border-top-style: solid;
        }

        &.-condensed {
          padding-bottom: toRem(5);
        }
      }

      &__area {
        width: 100%;
        height: 200px;

        &.-invalid {
          border: 2px solid #d93535;
        }
      }
    }

    &__footer {
      display: flex;
      justify-content: center;
      width: 100%;
      padding: toRem(20) 0;
      box-shadow: -5px 4px 10px 0px rgba(0, 0, 0, 0.2);
    }

    &__title {
      align-self: center;
      margin: 0;
    }

    &__icon {
      position: relative;
      padding: toRem(15);
      cursor: pointer;

      &:hover {
        border-radius: toRem(50);
      }
    }
  }
}