@import "~@wpmudev/shared-ui/scss/functions";
@import "~@wpmudev/shared-ui/scss/colors";
@import "~@wpmudev/shared-ui/scss/variables";
@import "~@wpmudev/shared-ui/scss/mixins";
@import "../../../scss/common/mixins";

@include body-class(true) {

  .box-minification-assets-auto {
    .sui-box-header .sui-actions-right > span:first-of-type {
      margin-right: 10px;
    }

    .wphb-minification-files {
      margin-left: -30px;
      margin-right: -30px;
      padding: 30px;

      .sui-box { box-shadow: 0 2px 7px 0 rgba(0,0,0,0.05) }

      .sui-box.wphb-close-section {
        box-shadow: none;
        border: 1px solid #DDDDDD;
        background-color: #F8F8F8;

        .sui-box-header { border-bottom: 0; }

        .wphb-ao-type-icon { background-color: #AAAAAA; }
        .wphb-ao-type-title strong { color: #888888; }
      }

      .sui-box .sui-box-header {
        padding: 30px;
        align-items: flex-start;

        @include bp(phone-large) {
          flex-wrap: wrap;
          .sui-actions-right { order: 3; }
        }
      }
    }

    .wphb-ao-type-icon {
      width: 31px;
      height: 30px;
      background-color: #17A8E3;
      border-radius: 5px;
      margin: -4px 10px 0 0;
    }

    .sui-icon-hummingbird,
    .sui-icon-speed-optimize {
      padding: 1px 8px;
      &:before { color: #fff !important }
    }

    .wphb-ao-type-title {
      display: flex;
      align-items: flex-start;
      flex-basis: 235px;
      @include bp(phone-large) {
        flex-basis: auto;
      }

      strong {
        font-size: 14px;
        line-height: 19px;
        margin-right: 5px;
      }

      .sui-tag {
        margin-right: 10px;
      }
    }

    small {
      color: #AAAAAA;
      flex-basis: 100%;
      margin: 0 30px 0 0;

      @include bp(phone-large) {
        flex-basis: 100%;
        margin: 10px 0 0 0;
        order: 5;
      }
    }
  }

}