@use '@observability/ui/styles/mixins' as mixins;
@use '@observability/ui/styles/variables' as variables;

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.mat-card {
  padding: unset;
}

.runs-header {
  @include mixins.flex-row($justify: flex-start);

  padding: variables.$space-sm;

  .title {
    margin: unset;

    span {
      @include mixins.font-style($style: caption, $color: secondary);

      display: block;
    }
  }

  mat-progress-spinner {
    margin-right: variables.$space-sm;
  }

  .date-controls {
    @include mixins.flex-row;

    margin-right: variables.$space-xxs;

    button[disabled] mat-icon {
      @include mixins.font-color(disabled);
    }

    mat-icon {
      @include mixins.font-color(secondary);
    }
  }
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: variables.$space-md;
  //overflow: auto;
}

.chart-container {
  position: relative;
  overflow: hidden;
  padding: 0 variables.$space-sm variables.$space-sm;

  .empty-state {
    @include mixins.flex-column();

    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
    position: absolute;
    background: white;

    &--title {
      @include mixins.font-style(title);
    }

    &--message {
      @include mixins.font-color(secondary);
    }
  }

  dots-chart {
    width: 100%;
    height: 100%;
    overflow-y: hidden;

    dot {
      cursor: pointer;
    }
  }

  gantt-chart {
    width: 100%;
    height: calc(100% - 64px);

    gantt-task {
      &.empty-message {
        @include mixins.flex-row;
        @include mixins.font-style($style: caption, $color: secondary);

        height: 100%;
        cursor: unset;
        background-color: unset !important;
      }
    }
  }
}

.instance--label {
  @include mixins.flex-row($justify: flex-start);

  flex: 1 1 0;
  width: 212px;

  &--icon {
    @include mixins.icon-size(20px);
    @include mixins.font-color(secondary);

    margin-right: variables.$space-xxs;

    &.clickable {
      cursor: pointer;
    }
  }

  &--text {
    width: 150px;
    display: inherit;
  }
}

.run--label {
  @include mixins.flex-row($justify: flex-start);

  width: 240px;
  padding-left: 22px;

  span {
    @include mixins.font-style($style: caption, $color: secondary);
  }
}

.loading-container {
  @include mixins.flex-row();

  width: 100%;
}

.secondary-text {
  @include mixins.font-style($style: caption, $color: secondary);
}
