@use 'src/styles/abstracts' as *;

.Runs__section {
  height: 100vh;
  overflow: hidden;
  &__appBarContainer {
    display: flex;
    flex-direction: column;
  }
  .Runs__loader {
    flex-direction: column;
    justify-content: space-between;
  }
}

.Runs__container {
  background-color: #ffffff;
  .Runs__paper {
    padding: 1em;
    height: 100%;
    user-select: none;
  }

  .Runs__fullHeight {
    height: 100%;
    // height: -moz-available; /* WebKit-based browsers will ignore this. */
    // height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
  }

  .Runs__table__container {
    display: flex;
    position: relative;
    flex-direction: column;
    flex: 1 1 100%;
    max-height: calc(100% - #{toRem(105px)});
    .ProgressBar {
      padding-bottom: toRem(105px);
    }
  }
}

.Runs {
  height: 100vh;
  &__RunList {
    position: relative;
    height: 100%;
    border-left: $border-grey;
    border-right: $border-grey;
    &__runListBusyLoader {
      padding-top: 100px;
    }
    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.25rem;
      background: #ffffff;
      border-bottom: 0.0625rem solid #ebf0f8;
      .MuiInputBase-root {
        height: 2rem;
        padding-left: 0.8125rem;
        border-radius: $border-radius-main;
        img {
          padding-right: 0.5625rem;
        }
        .MuiInputBase-input {
          font-weight: $font-500;
          font-size: $text-sm;
          color: #414b6d;
          &::placeholder {
            font-weight: $font-500;
            font-size: $text-sm;
            color: #606986;
            opacity: 1;
          }
        }
      }
      &__createButton {
        text-transform: none;
        width: 126px;
        padding: 4px 10px 4px 13px;
        img {
          padding-right: 9px;
        }
        .MuiButton-label {
          font-weight: $font-500;
          font-size: $text-sm;
          justify-content: flex-start;
        }
      }
    }
    &__runListBox {
      flex: 1;
      position: relative;
      &__titleBox {
        position: relative;
        margin-left: 15px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 40px;
        background-color: $white;
        &::before {
          content: '';
          width: 34px;
          height: 3px;
          background: $primary-color;
          position: absolute;
          left: 0;
          bottom: 0;
        }
        &__title {
          font-weight: $font-600;
          font-size: $text-sm;
        }
      }
    }
    &__modalContainer {
      width: 350px;
      &__titleBox {
        height: 40px;
        border-bottom: 1px solid #f2f5fa;
        display: flex;
        justify-content: center;
        align-items: center;
        &__title {
          font-weight: $font-600;
          font-size: $text-sm;
        }
      }
    }
    &__overLayContainer {
      .MuiDrawer-paper {
        width: 800px;
        box-shadow: -5px 0px 10px rgba(28, 40, 82, 0.1);
        top: 50px;
      }
      .MuiBackdrop-root {
        background-color: transparent;
      }
    }
  }
}

.Runs__title {
  margin: 0;
  padding: 0;
  color: $primary-color;
}

.RunsTable {
  height: 100%;
  width: 100%;
  position: absolute;
}

.Infinite_Loader,
.No_More_Message {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3);
}

.Run__list {
  height: 100%;
}
