ontime/client/src/features/modals/Modals.module.scss

@use '../../styles/main' as *;

//////////////////////////////////// main

.modalBody {
  font-weight: 400;

  .notes {
    font-weight: 400;
    color: $light-bg;
    display: grid;
    place-items: center;
    height: 4em;
  }

  .modalFields {
    min-height: 45vh;
    max-height: 45vh;
    overflow-y: auto;
    scrollbar-color: rgba($light-bg, 0.35) rgba($light-bg, 0.15);
    padding-right: 6px;

    label {
      //font-weight: 400;
      font-size: 0.8em;
    }

    .inlineAlias,
    .inlineAliasPlaceholder {
      display: grid;
      grid-template-columns: 20% 1fr 1em 1.5em 1.5em;
      gap: 8px;
      align-items: center;
    }
    .error {
      font-size: 0.8em;
      color: $error-red;
    }

    .inlineAliasPlaceholder {
      grid-template-columns: 20% 1fr 4em;

      .placeholder {
        background: $light-text;
        width: 100%;
        height: 24px;
      }
    }
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: rgba($light-bg, 0.15);
    border-radius: 4px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgba($light-bg, 0.35);
    border-radius: 4px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: rgba($light-bg, 0.45);
  }

  .modalInline {
    display: flex;
    gap: 2em;
    align-items: center;
    padding: 0 0.5em 0.5em 0.5em;
  }

  .spacedEntry {
    padding: 0 0.5em 0.5em 0.5em;
  }

  .pin {
    display: flex;
    gap: 0.5em;
    border-radius: 50%;

    input {
      border-radius: 50%;
    }
  }

  .submitContainer {
    margin-top: 2em;
    display: flex;
    justify-content: flex-end;
    gap: 1em;
  }

}

.modalBody > * {
  margin-top: 0.5em;
}

//////////////////////////////////// notes
p {
  &.notes {
    text-align: center;
    border-color: $light-bg-transparent;
    border-width: 0 2px;
    font-size: 0.9em;
    margin-bottom: 1em;
  }
}

span {
  &.notes {
    font-size: 0.9em;
    padding-left: 0.4em;
  }
}

.blockNotes {
  background-color: $bg-gray;
  margin: 1em 0;
  padding: 0.5em;
  font-size: 0.8em;
  border-radius: 2px;

  table {
    background-color: #fff;
    border-left: 4px solid lighten($ontime-pink, 5%);
    width: 100%;
    margin: 0.5em 0;
    border-radius: 2px;

    :first-child {
      padding-left: 1em;
    }

    td {
      user-select: text;
    }
  }

  .noteItem {
    user-select: text;
    font-weight: 600;
    padding-right: 2em;
  }

  .flexNote {
    user-select: text;
    padding-bottom: 0.3em;
    display: block;
  }

  .emNote {
    user-select: text;
    display: block;
    background-color: #fffc;
  }
}

.labelNote {
  color: $light-bg;
  padding-right: 1em;
}

.labelNoteInline {
  color: $light-bg;
}

.inlineFlex {
  display: flex;
  gap: 1em;
  align-items: center;
  margin-bottom: 1em;
}