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

chef-subheading {
  max-width: 610px;
}

.reporting-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 35px 0 35px;
  background: $chef-white;

  app-reporting-searchbar {
    flex: 1;
    margin-right: 10px;
  }

  .download-report {
    position: relative;

    .dropdown-toggle {
      @include base-box-shadow();
      display: flex;
      margin: 0;
      width: 50px;
      height: 50px;
      justify-content: center;
      align-items: center;
    }

    .dropdown {
      right: 0;
      z-index: 1;

      .menu-list {
        padding-left: 0px;
        width: 140px;

        li {
          list-style-type: none;
          font-size: 14px;
          padding: 10px 10px 10px 10px;
          color: $chef-primary-bright;
        }

        li:hover {
          background: rgba($chef-primary-bright, 0.2);
          cursor: pointer;
          outline: 0;
        }
      }
    }
  }

  .copy-dropdown {
    position: relative;
    float: right;
    padding-left: 5px;

    .dropdown-toggle {
      @include base-box-shadow();
      margin: 0;
      width: 50px;
      height: 50px;

      chef-icon {
        position: relative;
        top: -1px;
        right: 1px;
      }
    }

    .dropdown {
      right: 0;
    }

    chef-click-outside {
      display: block;
      padding: 1em 0 1em 1em;

      p {
        margin-bottom: 0.5em;
      }
    }

    .copy-input {
      display: flex;
      align-items: center;
      justify-content: space-between;

      input {
        padding: 1em;
        width: 300px;
        border-radius: $global-radius;
        border: 1px solid $chef-grey;
      }
    }
  }
}

.nav-tabs-list {
  margin: 0;
  padding: 0 35px;
  background: $chef-white;
}

.nav-tabs-item {
  display: inline-block;
  position: relative;
  list-style: none;
  margin-right: 8px;
}

.nav-tab {
  display: inline-block;
  font-size: 16px;
  line-height: 32px;
  min-width: 72px;
  padding: 8px 16px;
  cursor: pointer;
  color: inherit;
  text-decoration: none;

  // Underline
  &:before {
    display: block;
    content: "";
    position: absolute;
    bottom: -2px;
    height: 2px;
    left: 0;
    width: 100%;
    background: transparent;
  }

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

  &:hover,
  &:focus {
    background: $chef-lightest-grey;
  }

  &:active {
    background: $chef-light-grey;
  }
}

.reporting-summary {
  padding: 2em 35px;
  background: $chef-white;

  .summary {
    @include base-box-shadow();
    background: $chef-white;
    border-radius: $global-radius;
  }

  .summary-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 0;
    border-radius: $global-radius;
    cursor: pointer;

    p {
      display: flex;
      margin: 0;
      align-items: center;
      color: $chef-white;
    }

    chef-icon {
      margin: 0 1em;
      color: $chef-white;
    }
  }

  .failed .summary-toggle {
    background: $chef-critical;
  }

  .passed .summary-toggle {
    background: $chef-success;
  }

  .waived .summary-toggle {
    background: $chef-success;
  }

  .skipped .summary-toggle {
    background: $chef-dark-grey;
  }

  .unknown .summary-toggle {
    background: $chef-grey;

    p, chef-icon {
      color: $chef-primary-dark;
    }
  }

  .summary-body {
    display: flex;
    padding: 1em;
    background: $chef-white;

    table {
      width: 50%;
      flex-grow: 1;
      flex-basis: 50%;
      font-size: 14px;

      &:first-child {
        border-right: 1px solid $chef-grey;

        tr {
          td {
            padding-right: 2.25em;
          }
        }
      }

      &:last-child {
        tr {
          th {
            padding-left: 2.25em;
          }
        }
      }

      tr {
        margin: 0;

        th,
        td {
          padding: 0.25em 0;
          border: none;
          background-color: transparent;
          word-break: break-all;
        }

        th {
          text-align: left;
        }

        td {
          flex-grow: 2;
        }

        chef-icon {
          margin-right: 10px;
          color: $chef-light-grey;
        }
      }
    }
  }

  .empty-summary {
    padding: 1em;
    border: 1px dashed $chef-grey;
    background: $chef-lightest-grey;
    border-radius: $global-radius;

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

#download-modal {
  text-align: center;
}

.reporting-download-side-panel {

  z-index: 10;

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

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

  .side-panel-body {
    font-size: 14px;
    background: $chef-white;

    chef-tooltip {
      width: 400px;
      border: 1px solid $chef-grey;
    }

    chef-tooltip.top {
      transform: translate(-65%, calc(-100% - .75em));
    }

    chef-tooltip::after {
      border-bottom: 1px solid $chef-grey;
      border-right: 1px solid $chef-grey;
      transform: translateX(275%) translateY(-50%) rotate(45deg);
    }

    .table {
      width: 100%;
    }

    .table-header {
      font-size: 16px;
    }

    .failed-status {
      color: $status-error;
    }

    .running-status {
      color: $chef-dark-grey;
    }

    .success-status {
      color: $chef-primary-bright;
    }

    .error-message {
      white-space: nowrap;
      max-width: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    .no-reports-message {
      text-align: center;
      border-bottom: 5px solid $chef-white;
    }

    .download-link {
      text-decoration: underline;
      cursor: pointer;
    }
  }

}
