@import "../../styles/variables";
@import "../../styles/mixins";


#run-history-panel {
  chef-button {
    margin: 0;
  }

  .side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em;
    background: $chef-white;
    border-bottom: 1px solid $chef-grey;

    .header-icon {
      font-size: 2em;
      color: $chef-dark-grey;
    }

    .header-text {
      margin: 0 1em;
      flex-grow: 1;
      word-break: break-all;

      p {
        margin: 0;
        color: $chef-dark-grey;
      }
    }
  }
}

.side-panel-body-header {
  display: flex;
  flex-direction: column;
  padding: 1em;
  border-bottom: 1px solid $chef-grey;

  chef-button {
    margin: 0 1em 0 0;
  }

  p {
    margin: 0;
  }
}

.run-history-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.run-history-list-item {
  border-bottom: 1px solid $chef-grey;
  border-left: 4px solid transparent;
  background: $chef-white;

  &.selected {
    border-left: 4px solid $chef-primary-bright;
  }
}

.list-item-summary {
  display: flex;
  align-items: center;
  padding: 1em;

  chef-icon {
    &.failure {
      color: $chef-critical;
    }

    &.success {
      color: $chef-success;
    }
  }

  .list-item-text {
    margin: 0 1em;
    flex-grow: 1;

    chef-button,
    p {
      margin: 0;
    }

    p {
      line-height: 1.5;
    }
  }
}


app-date-selector {
  .date-selector .selector {
    border: 1px solid $gray-shadow;
  }
}

.filter-selectors {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 1em;

  .selector {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 60px;
    border-color: $chef-grey;
    border-radius: 4px;
    margin-right: 20px;
    cursor: pointer;
  }

  .all {
    color: $chef-primary-bright;
    background-color: $chef-white;

    &.active {
      color: $chef-white;
      background-color: $chef-primary-bright;
    }
  }

  .failed {
    color: $chef-critical;
    background-color: $chef-white;

    &.active {
      color: $chef-white;
      background-color: $chef-critical;

      chef-icon {
        color: $chef-white;
      }
    }
  }

  .successful, .passed {
    color: $chef-success;
    background-color: $chef-white;

    &.active {
      color: $chef-white;
      background-color: $chef-success;
    }
  }

  .skipped {
    color: $chef-grey;

    &:hover, &.active {
      background-color: lighten($gray, 10%);
    }
  }

  chef-button {
    padding: 5px;
  }
}

.date-selector {
  padding-right: 20px;
}

.no-runs-small {
  @include empty-item();
  border: 0;
  list-style: none;
  margin-top: 0;
  padding: 2em;
}

.history-pagination {
  padding: 1em;
}
