@import 'base';

.users {
  @extend %block;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  position: relative;
  overflow: hidden;

  .users__user-table-container {
    flex: 1;
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }

  .users__upload-error {
    background-color: color(important, bright);
    margin: 10px 0px;
    padding: 8px 12px;
    color: color(black, normal, 0.54);
    border: solid 1px color(important);
    border-radius: 5px;
  }

  .users__import-text {
    color: color(black);
    padding: 10px 20px;
  }

  .users__import-drop-zone {
    display: flex;

    .users__import-drop-zone__upload {
      flex: 1;
      display: flex;
      align-items: stretch;
      flex-direction: column;
    }

    .users__import-drop-zone__text {
      display: flex;
      margin-left: 10px;
      align-items: flex-start;
      max-width: 200px;
      text-decoration: underline;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .users__help {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    color: color(black);
    max-width: 800px;
    margin-top: 20px;

    .users__help__title {
      font-weight: 500;
      color: color(black);
      padding-top: 10px;
    }

    .users__help__text {
      padding: 3px 20px 17px 20px;
      color: color(black, light);
    }
  }
}