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

.ExperimentHeader {
  &__headerContainer {
    height: 4.375rem;
    background: $white;
    display: flex;
    align-items: center;
    &__appBarBox {
      display: flex;
      padding-top: $space-unit;
      justify-content: space-between;
      &__navigationContainer {
        max-width: 50%;
        width: 50%;
      }
      &__actionContainer {
        width: 4.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-left: $border-main;
        margin-bottom: $space-unit;
        i {
          color: $pico-70;
        }
        a {
          text-decoration: unset;
        }
      }
    }
    &__appBarTitleBox {
      display: flex;
      flex-direction: column;
      font-size: $text-md;
      font-weight: $font-600;
      color: $text-color;
      align-items: flex-start;
      height: fit-content;
      max-width: 100%;
      width: auto;
      &__appBarTitleBoxWrapper {
        display: flex;
        width: 100%;
      }
      &__title {
        margin-bottom: $space-xxs;
      }
      &__date {
        display: flex;
        i {
          margin-right: $space-xxs;
          color: $pico-70;
        }
      }
      &__Skeleton {
        margin-right: $space-xs;
      }
      &__buttonSelectToggler {
        width: 1.5rem;
        height: 1.5rem;
        top: -$space-xxxxs;
        &.opened {
          background: $primary-color-10;
        }
        .MuiButton-label {
          padding-top: $space-xxxxs;
        }
      }
      &__container {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        margin-right: $space-xxxs;
        cursor: pointer;
        max-width: calc(100% - 6.5rem);

        &__pageName {
          margin-right: 0.4375em;
          text-transform: capitalize;
          text-decoration: none;
        }
        &__runHash {
          margin-left: 0.4375em;
          text-transform: lowercase;
        }
      }
      span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
      }
    }
    .StatusLabel {
      margin-left: $space-xs;
    }
  }
}
