.shop-list-modal {
  #modal-saving-to-shop-list {
    overflow: hidden;

    .saved-modal {
      overflow-y: auto;
    }
  }

  .info-container {
    padding: 0;
  }

  .title-icon {
    width: 30px;
    height: 40px;
    color: $green;
    margin-right: 20px;
    margin-left: 8px;
  }

  .saving-item-picture {
    @include flex-centralize;
    width: 130px;
    height: 130px;
    margin-right: 30px;

    img {
      width: auto;
      max-width: 100%;
      max-height: 100%;
    }
  }

  .saving-content {
    .saved-action-link {
      margin-top: 15px;

      :first-child {
        margin-bottom: 15px;
      }
    }
  }

  .container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .unauthenticated {
    .notification__close {
      display: none;
    }
  }

  .modal-header,
  .modal-body {
    .container > .row {
      margin: 0;
    }
  }

  .modal-body {
    .container {
      padding-bottom: 30px;
    }

    hr {
      margin-bottom: 20px;
    }

    form {
      float: none;
    }
  }

  .modal-header {
    .add-list-modal,
    .saved-modal {
      svg {
        margin-left: 0;
      }
    }
  }

  .list-error {
    margin-bottom: 10px;

    &__text {
      color: $red;
      margin-bottom: 20px;
      font-size: .75rem;
      line-height: 1rem;
    }
  }

  .shopping-list {
    &[data-action='projectLists'] {
      .saved-modal {
        display: none;
      }

      .create-new-list {
        border: 1px solid $gray;
        border-radius: 3px;
        padding: 9px 16px;
        margin-bottom: 20px;

        &__btn {
          &--plus {
            display: inline;
          }

          &--minus {
            display: none;
          }

          &--open {
            .create-new-list__btn {
              &--plus {
                display: none;
              }

              &--minus {
                display: inline;
              }
            }
          }

          span {
            text-decoration: none;
          }
        }
      }

      .added-project {
        &__list {
          margin-top: 0;
        }
      }
    }

    &[data-action='projectListProducts'] {
      .add-list-modal {
        display: none;
      }

      .list-error {
        display: none;
      }
    }
  }
}

.add-list-modal {
  .title-icon {
    color: $blue;
  }

  .create-new-list {
    &__btn {
      cursor: pointer;

      svg {
        min-width: 24px;
      }

      span {
        text-decoration: underline;
      }
    }

    &__action {
      height: 40px;
      margin-top: 11px;
    }

    &__form {
      display: flex;
      align-items: flex-start;

      .form-row {
        @include make-col(10);
        padding-right: 10px;


        &__error {
          margin: 8px 0 0;
          color: $red;
          display: none;
        }

        &__field {
          padding-right: 15px;
          padding-left: 15px;
        }

        &_validation-error {
          .form-row__error {
            display: block;
          }
        }

        .btn--clear {
          right: 15px;
        }
      }
    }

    .form-row {
      margin-bottom: 10px;
    }
  }

  .added-project {
    &__list {
      list-style: none;
      margin: 20px 0 0;
      padding: 0;

      &-item {
        margin-top: 10px;
        word-break: break-all;

        &:first-of-type {
          margin-top: 0;
        }
      }
    }

    &__projects {
      max-height: calc(100vh - 360px);
      overflow: scroll;

      &--large {
        max-height: calc(100vh - 420px);
      }
    }

    &__close {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 20px;
      background: $white;
    }

    &__pagination {
      .pagination {
        margin-top: 20px;
      }
    }
  }
}

.saved-modal {
  .saved-to-list {
    display: flex;
    align-items: baseline;
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.5rem;

    &_saved-text {
      white-space: nowrap;

      svg {
        margin-right: 8px;
      }
    }

    &__icon {
      width: 16px;
      height: 16px;
      color: $green;
    }

    &_list-name {
      font-weight: 500;
      margin-left: 8px;
      word-break: break-all;
    }
  }

  .saved-content {
    display: flex;
    margin-bottom: 10px;

    .saving-item-picture {
      width: 100px;
      height: 100px;
      margin-right: 15px;
    }

    &__info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .saving-name {
        font-size: 14px;
        line-height: 24px;
        font-weight: 700;
        word-break: break-all;
      }
    }

    .order-item {
      &__quant,
      &__price {
        display: flex;
        align-items: baseline;
        margin-top: 0;

        &-title {
          width: auto;
          margin-right: 5px;
        }
      }

      &__value {
        font-size: 1.13rem;
        line-height: 1.5rem;
        font-weight: 700;
      }
    }
  }

  .saved-action-link {
    display: flex;
    margin: 20px -5px 0;

    .btn-action-link {
      width: 50%;
      margin: 0 5px;
      display: flex;
      align-items: center;
      justify-content: center;

      .btn__text {
        white-space: normal;
      }
    }
  }

  .list-error {
    margin-bottom: 20px;
  }
}

.add-list-modal,
.saved-modal {
  .btn-primary,
  .btn-secondary {
    font-weight: 500;
  }
}

@include media-breakpoint-up(xs) {
  .shop-list-modal {
    .saving-content {
      .saved-action-link {
        float: right;
        width: calc(100% - 160px);

        a {
          display: block;
        }
      }

      .saving {
        &-item-picture {
          float: left;
          display: flex;
          justify-content: center;
        }

        &-name {
          float: right;
          width: calc(100% - 150px);
        }
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .shop-list-modal {
    #modal-saving-to-shop-list {
      overflow-x: hidden;
      overflow-y: auto;
    }

    .saving-content {
      .saving {
        &-name {
          float: none;
          width: 100%;
        }
      }
    }

    .modal-body {
      .container {
        padding: 20px;
      }
    }
  }

  .add-list-modal {
    .added-project {
      &__close {
        position: static;
        margin: 20px 0 0;
      }

      &__projects {
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
      }
    }

    .create-new-list {
      &__form {
        .form-row {
          padding-right: 25px;
        }
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .shop-list-modal {
    .title-icon {
      margin-right: 15px;
      margin-left: 5px;
    }

    .saving-item-picture {
      margin-right: 20px;
    }

    .saving-content {
      .saved-action-link {
        width: 100%;
        text-align: center;
        margin-top: 0;
        padding-top: 15px;

        &::before {
          content: '';
          display: table;
          clear: both;
        }
      }
    }

    .modal-header {
      padding: 0;
    }

    .container {
      padding: 20px 6px;
    }

    .pagination {
      &__link {
        &:hover {
          border-width: 0;
          color: $gray-dark;
        }

        &--focus {
          &:hover {
            border-width: 1px;
            border-radius: 3px;
            border-color: $blue;
            text-decoration: none;
          }
        }
      }

      &__btn {
        &:hover {
          border-width: 0;
          background: $white;
          color: $blue;
        }

        &.pagination__link--focus {
          &:hover {
            border-width: 1px;
            border-radius: 3px;
            background: $blue;
            color: $white;
          }
        }
      }
    }
  }
}