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

:host {
  width: 20%;
  max-width: 300px;
  margin-right: 1em;
  padding: 1em;
  border: 1px solid $chef-light-grey;
  border-radius: $global-radius;
  box-shadow: inset 0 0 0 2px $gray-pale;
  background-color: $chef-lightest-grey;
  color: $chef-dark-grey;
  text-transform: capitalize;
  transition: background 0.2s;

  &:hover,
  &:focus {
    @include base-box-shadow(24px);
    color: $chef-primary-dark;
    cursor: pointer;
    background-color: $white;
  }

  &.active {
    @include base-box-shadow(24px);
    border: 0;

    & > .node-rollup-title,
    & > .count,
    chef-icon {
      color: $white;
    }

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

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

    &.failure {
      background: $chef-critical;
    }

    &.missing {
      background: $chef-dark-grey;
    }
  }
}

chef-icon {
  position: relative;
  top: 2px;
}

.node-rollup-title {
  display: inline-block;
  margin: 0;
  width: 100%;
  font-size: .875em;
  font-weight: normal;
  color: inherit;
}

.count {
  display: inline-block;
  width: 100%;
}
