/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 2018, 2019. All Rights Reserved.
 * Copyright (c) 2020 Red Hat, Inc.
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure 
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 *******************************************************************************/

@import 'node_modules/carbon-components/scss/globals/scss/_colors';
@import 'variables';
$critical: $mcm__color__critical;
$healthy: $color__green-40;
$warning: $color__yellow-30;
$util-critical: $color__blue-51;
$util-warning: $color__blue-40;
$util-healthy: $color__teal-20;
$gray: $color__gray-1;
$gray-for-text: $mcm__color__gray;

.bx--module.bx--module--single {
  //max-width: 28rem;
  min-width: 24rem;
}

.dashboard-card {
  padding: 0;
  margin-bottom: 3rem;
  margin-right: 1rem;
  margin-left: 1rem;

  &.bx--module {
    td {
      padding-left: 1.5rem;
      color: #000;

      p {
        display: inline;
        float: left;
        padding-left: 0.5rem;
      }
    }

    .bx--module__inner {
      background-color: transparent;
      box-shadow: none;
      color: $color__white;
    }

    .bx--module__title,
    .bx--module__body,
    .bx--module__header {
      color: $color__white;
    }

    .dashboard-card-orb {
      padding: 1.5rem;

      &-summary {
        padding: 1.5rem 1.5rem 0rem 1.5rem;
        min-height: 12rem;
      }
    }

    .dashboard-card-table-body {
      padding: 0;
    }

    .bx--module__content p {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      display: block;
      max-width: 15rem;
      text-transform: capitalize;
    }
  }
  background-color: $color__white;
  color: #000;

  .bx--module__title,
  .bx--module__body,
  .bx--module__header {
    color: #000 !important;
  }

  .bx--responsive-table {
    border: none;
  }
}

.dashboard-card-header {
  &__critical {
    border-left: 6px solid $critical;
  }

  &__warning {
    border-left: 6px solid $warning;
  }

  &__healthy {
    border-left: 6px solid $healthy;
  }

  &__utilization {
    border-left: 6px solid $util-critical;
  }

  &__icon {
    display: flex;
    align-items: center;

    &-title {
      padding-right: 0.5rem;
    }

    &__critical {
      fill: $critical;
      display: inline;
      margin-left: .5rem;
    }

    &__warning {
      fill: $warning;
      display: inline;
      margin-left: .5rem;
    }
  }
}

.dashboard-overview {
  div {
    display: flex;
    justify-content: center;

    a {
      text-decoration: none;
    }
  }
}

.dashboard-count {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 1rem;
}

@mixin circle($size) {
  height: $size;
  width: $size;
  border-radius: 100%;
}
$orbSize: 5rem;
$innerOrbSize: $orbSize - 0.4rem;

.dashboard-orb {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $color__white;
  color: #000;
  @include circle($orbSize);
  padding: 0;

  &__inner {
    @include circle($innerOrbSize);

    &:hover {
      box-shadow: 0 0 5px 4px $gray;
    }
  }

  &__critical {
    border: 3px solid $critical;
  }

  &__warning {
    border: 3px solid $warning;
  }

  &__healthy {
    border: 3px solid $healthy;
  }

  &__util {
    &-critical {
      border: 3px solid $util-critical;
    }

    &-warning {
      border: 3px solid $util-warning;
    }

    &-healthy {
      border: 3px solid $util-healthy;
    }
  }

  &__gray {
    border: 3px solid $gray;
    color: $gray-for-text;

    &:hover {
      box-shadow: none;
    }
  }
}

.dashboard-table {
  margin-top: 1rem;
  min-width: 0;

  .bx--table-body {
    .bx--table-row:hover {
      border-left: 1px solid $color__blue-40;
    }
  }

  .dashboard-table-header {
    align-items: center;
    height: 2rem;
    border: none;
    font-weight: bold;
    font-size: 0.75rem;

    &__secondary {
      font-weight: 400;
    }
  }
}

.dashboard-status {
  border-bottom: 1px solid $gray;
  border-top: 1px solid $gray;
  align-items: center;
  height: 2rem;
  width: 8rem;

  .table-status-icon {
    margin-right: 1rem;
    height: 1rem;

    &__healthy {
      fill: $healthy;
      display: inline;
      float: left;
    }

    &__critical {
      fill: $critical;
      display: inline;
      float: left;
    }

    &__warning {
      fill: $warning;
      display: inline;
      float: left;
    }
  }

  div {
    display: inline-block;
    float: left;
  }

  a {
    display: inline-block;
    float: left;
  }
}

.dashboard-status-link {
  border-bottom: 1px solid $gray;
  border-top: 1px solid $gray;
  align-items: center;
  height: 2rem;
}

.dashboard-status-secondary {
  border-bottom: 1px solid $gray;
  border-top: 1px solid $gray;
  width: 1.5rem;
}

.dashboard-card-text {
  font-weight: bold;
  color: #000;
  text-transform: capitalize;

  &__gray {
    color: $gray-for-text;
  }

  &-list {
    display: flex;
    flex-direction: column;
    align-items: center;

    &-item {
      padding-top: 0.25rem;

      &-alt {
        padding-top: 0.15rem;
        font-style: italic;
        font-weight: normal;
      }
    }
  }
}

.dashboard-card-separator-text {
  div {
    font-weight: 500;
    text-align: left;
    padding: 1.8rem 0 0 1.5rem;
    display: inline-block;
    text-transform: uppercase;
  }
}

.dashboard-card-separator-link {
  position: relative;
  bottom: 0;

  a {
    float: right;
    padding: 0rem 1rem 1rem;
    font-size: 0.75rem;
    font-weight: bold;
  }
}

