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

.rollup-item {
  display: inline-block;
  width: 15%;
  padding: 1em;
  margin-right: 10px;
  background-color: $chef-lightest-grey;
  border: 1px solid $chef-light-grey;
  border-radius: $global-radius;
  box-shadow: inset 0 0 0 1px $gray-pale;
  color: $chef-dark-grey;
  text-align: left;
  text-transform: capitalize;
  transition: background-color .2s;
  font-weight: bold;
  font-size: 13px;

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

  chef-icon {
    vertical-align: -3px;
    font-size: 1.2em;
  }

  &:hover {
    @include base-box-shadow(24px);
    color: $chef-primary-dark;
    cursor: pointer;
    background-color: $white;
    transition: all .2s;
  }

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

    h3, i, .count, chef-icon {
      display: inline-block;
      color: $white;
    }

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

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

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

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

  h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
  }

}

.resources-rollup {
  margin-bottom: 13px;
}

.resources-list {

  .head {
    display: flex;
    justify-content: space-between;
    background-color: $chef-lightest-grey;
    border-radius: $global-radius;
    color: $chef-primary-dark;
    border: 1px solid $chef-light-grey;
    box-shadow: 0 0 16px 0 $chef-light-grey;
    font-size: 14px;
    margin-bottom: 8px;
    padding: 1em;
  }

  .step {
    min-width: 61px;
  }

  .status {
    width: 4.6%;
  }

  .type, .action, .view {
    width: 11%;
  }

  .name {
    width: 30%;
  }

  .cookbook {
    width: 17%;
  }

  .view-action {
    min-width: 70px;
    text-align: center;
  }
}

.no-resources {
  @include empty-item();
}
