@import '../pagination/pagination';

.global-csl-modal {
  .modal-content {
    text-align: left;

    .modal-header {
      padding-bottom: 10px;
    }

    .modal-body {
      padding-top: 0;
    }
  }

  .modal.w800 {
    width: 80%;
  }

  .csl-list-header {
    padding: 12px;
    width: 100%;
    margin: 0;
  }

  .modal-csl-filters {
    &-listtype {
      width: 25%;
      float: left;
    }

    &-search {
      width: 75%;
      float: left;
    }

    #cslSearchListQuery  {
      + label {
        top: -1.9rem;
      }
      &:focus + label,
      &.autofocus + label {
        top: -3.5rem;
        font-size: .875rem;
        color: $black;
        font-weight: normal;
      }
    }

    .search-icon-container {
      position: absolute;
      right: 0;
      top: 10%;
      width: 35px;
      height: 35px;
      border: 0;
      background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/svg/icons/header/search.svg) center center no-repeat;
      background-size: 1rem;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      @include font-size(0px);
    }
  }

  .modal-csl-results {
    @include font-size(16px);
    word-wrap: break-word;
    line-height: 1.5;

    .csl-result-list,
    .csl-default-list {
      >.row {
        padding: 12px;
        border-bottom: 1px solid $gray-medium;
        margin: 0;
      }
    }

    .csl-default-list {
      > .row {
        background: $blue-medium;
        border: 2px solid $gray-medium;
        margin-bottom: 12px;
      }

      .set-default-icon {
        .fav-icon-filler {
          fill: $gray;
          stroke: $gray;
        }
      }
    }

    .csl-result-list {
      border: 2px solid $gray-medium;

      > .row:nth-child(even) {
        background-color: $gray-light;
      }

      > .row:last-child {
        border-bottom: 0 none;
      }
    }

    .csl-item-default-icon {
      a {
        display: flex;
        width: 100%;
        height: 100%;

        &:hover .fav-icon-filler {
          fill: $gray;
          stroke: $gray;
        }
      }
    }

    .csl-default-item-action,
    .csl-item-action,
    .csl-item-default-icon,
    .csl-default-list-icon {
      .dropdown-arrow {
        border-color: $blue;
        width: 15px;
        height: 15px;
        float: right;
        top: 5px;
      }
    }

    .csl-result-error {
      padding: 12px;
      color: $red;
      min-height: 200px;
      line-height: 200px;
      border: 1px solid $gray-medium;
      text-align: center;
      @include font-size(20px);
    }

    .csl-result-error-modal {
      padding: 12px;
      min-height: 200px;
      line-height: 75px;
      text-align: center;
      font-weight: 600;
      @include font-size(20px);
    }

    &.spinner {
      .csl-result-list,
      .csl-default-list {
        opacity: 0.5;
      }
    }

    .csl-make-default {
      position: relative;

      &::after {
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
      }

      .set-default-icon {
        margin-left: 0.5em;
        pointer-events: none;
      }
    }
  }

  .csl-create-list {
    .modal-csl-back-to-list {
       span {
         float: left;
       }
      .arrow-left {
        left: -10px;
        top: 5px;
      }
    }

    .create-list-heading {
      font-size: 22px;
    }

    input[type="radio"] + .radio-label{
      padding: 0 1.5em;

      &:before {
        position: absolute;
      }
    }
  }
  .csl-display-module {
    &.csl-display-list {
      overflow: hidden;
    }

    &.csl-display-list.show-display {
      display: block;
      -webkit-animation: slide-from-left .3s ease-out;
      -moz-animation: slide-from-left .3s ease-out;
    }

    &.csl-create-list.show-display {
      display: block;
      -webkit-animation: slide-to-left .3s ease-out;
      -moz-animation: slide-to-left .3s ease-out;
    }
  }

  @-webkit-keyframes slide-from-left {
    0% { opacity: 0; -webkit-transform: translateX(-100%); }
    100% { opacity: 1; -webkit-transform: translateX(0); }
  }
  @-moz-keyframes slide-from-left {
    0% { opacity: 0; -moz-transform: translateX(-100%); }
    100% { opacity: 1; -moz-transform: translateX(0); }
  }

  @-webkit-keyframes slide-to-left {
    0% { opacity: 0; -webkit-transform: translateX(0); }
    100% { opacity: 1; -webkit-transform: translateX(-100%); }
  }
  @-moz-keyframes slide-to-left {
    0% { opacity: 0; -moz-transform: translateX(0); }
    100% { opacity: 1; -moz-transform: translateX(-100%); }
  }

  #cslSearchListType {
    max-height: 46px;
  }

  #cslSearchListQuery::-ms-clear {
    display: none;
  }

}

.cart-csl-messaging .block-copy {
  @include font-size(14px);
}

//Small Screen Or Tablet Styles
@media (min-width: $screen-sm-min) and (max-width: $screen-md-min) {
  .global-csl-modal {
    .modal-csl-filters-listtype {
      width: 35%;
    }
    .modal-csl-filters-search {
      width: 65%;
    }
  }
}

//Mobile Specific Styles
@media (max-width: $screen-xs-max) {
  .global-csl-modal {
    .modal-csl-filters-listtype,
    .modal-csl-filters-search {
      width: 100%;
      margin: 6px 0;
    }

    .select.select-with-input {
      .select-wrapper {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
      }
    }

    #cslSearchListQuery {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      border-left: 1px solid $gray;
    }

    .csl-default-item-details div[class*="col-"] {
      margin-bottom: 6px;
    }

    .csl-result-list,
    .csl-default-list {
      > .row {
        display: flex;
      }
    }

    .csl-default-item-action,
    .csl-item-action {
      .dropdown-arrow {
        left: 10px;
      }
    }

    .csl-default-item-action,
    .csl-item-action,
    .csl-item-default-icon,
    .csl-default-list-icon,
    .csl-item-default-icon a {
      flex: 1;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
  }
}