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

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

  .count {
    color: $chef-dark-grey;
  }

  .fa {
    line-height: 1.25em;
    padding-right: .5em;
  }

  .icon {
    display: none;
    margin-top: 15px;
    width: 94%;
  }

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

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

    h3, i, .count {
      color: $white;
    }

  }

  h3 {
    margin: 0;
    font-size: inherit;
    color: $chef-dark-grey;
    font-weight: inherit;
  }

}

.attributes {
  display: block;

  form {
    $height: 45px;

    position: relative;
    height: $height;
    margin-bottom: 22px;

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

    .input-container {
      position: absolute;
      height: $height;
      left: 0;
      right: 56px;

      input {
        position: absolute;
        height: $height;
        font-size: 14px;
        color: $chef-primary-dark;
        border: 1px solid $gray-light;
        padding: 8px;
        width: 100%;
      }

      .info {
        position: absolute;
        top: 50%;
        vertical-align: middle;
        transform: translateY(-50%);
        right: 14px;

        .results {
          font-size: 12px;
          color: $chef-primary-bright;
          margin-right: 6px;

          &.none {
            color: $alert-pink;
          }
        }

        .reset {
          display: inline-block;
          color: $chef-primary-bright;
          background-color: #F7F7F7;
          cursor: pointer;
          padding: 6px 8px;
          border-radius: 4px;
        }
      }
    }

    button[type="submit"] {
      position: absolute;
      width: $height;
      height: $height;
      right: 0;
      border: none;
      font-size: 20px;
      text-align: center;
      color: $chef-primary-bright;
      background: #F7F7F7;
    }
  }

  .attributes-rollup {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .expand-collapse {
    font-size: 13px;
    color: $chef-primary-bright;
    margin-bottom: 16px;

    .action {
      cursor: pointer;
    }

    .separator {
      margin: 0 5px;
    }
  }

  .json-tree-container {
    font-size: 14px;
  }
}
