@import '../helpers/helpers';
@import '../components/big-wins';

.cc-order {
  margin-top: 15px;
  padding-top: 15px;
  background: $gray-bg;
  border-top: 1px dotted $gray;

  &__head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 1rem;
  }

  &__store {
    .cc-order {
      &-icon {
        color: $blue;
      }
    }

    &-select {
      width: 100%;
      display: flex;
      justify-content: space-between;
      color: $red;
      flex: 0 0 100%;

      & .cc-order {
        &-icon,
        &__change {
          color: $red;
        }
      }
    }

    &-unselected {
      a {
        color: $red;
      }
    }

    &-info {
      .store-info {
        &__address {
          width: 100%;
        }
      }
    }
  }

  &__change {
    &-hide {
      display: none;
    }
  }

  &-icon {
    color: $blue-dark;
    margin-right: 5px;
  }

  &__info {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    margin-top: 15px;
    padding: 20px;
    background: $white;
    border: 0;

    &-hide {
      display: none;
    }
  }

  &__section {
    &-cta {
      & .btn {
        margin: 15px 0;
      }
    }
  }

  &__close {
    margin-bottom: 15px;
    text-align: right;
    font-size: 1rem;
  }

  & .stock {
    &__quest {
      display: block;
    }
  }

  &__store-info {
    @include make-col(12);
    margin-top: 15px;

    .store-info {
      &__header {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
      }

      &__name {
        font-size: 1rem;
      }

      &__hide-info {
        text-align: right;
      }

      &__hide-info,
      &__info {
        font-size: .875rem;
      }

      &__phone,
      &__address {
        padding-bottom: 10px;
      }

      &__map {
        width: 100%;
        margin: 15px 0;

        &_hide {
          display: none;
        }
      }

      &__postcode {
        padding: 10px 0;
      }

      &__address {
        display: flex;
        flex-direction: column;
      }

      &__open {
        &_title {
          color: $blue-dark;
          font-size: .875rem;
        }
      }

      &__table {
        border: 1px solid $gray-light;
        width: 100%;
        font-size: .875rem;
        margin-bottom: 20px;

        &_regular {
          .store-info {
            &__table_row {
              &:first-of-type {
                background: $blue-dark;
                color: $white;
                font-weight: 500;
              }
            }

            &__table {
              &_cell {
                padding: 10px;
              }
            }
          }
        }

        &_special {
          .store-info {
            &__table {
              &_day {
                font-size: .75rem;

                & .store-info__table_cell {
                  padding-top: 0;
                  padding-bottom: 10px;
                }
              }

              &_time {
                vertical-align: top;
              }

              &_cell {
                padding: 10px 10px 0;
              }
            }
          }
        }
      }
    }

    &.store-info-hide {
      display: none;
    }
  }
}

@media screen and (max-width: 320px) {
  .cc-order {
    &__section-info {
      .store__name {
        max-width: 130px;
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .cc-order {
    padding: 10px 10px 0;

    &__info {
      flex-direction: row;
    }

    &__section-find ~ .cc-order__section-list {
      @include make-col(6);
    }

    &__close {
      @include make-col(12);
    }

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

      &-find {
        .stock__quest {
          label {
            display: block;
          }
        }
      }

      &-list {
        margin-left: 15px;
        padding-left: 15px;

        & .cc-order {
          &__section-info {
            position: relative;


            &:before {
              content: '';
              width: 1px;
              height: 100%;
              position: absolute;
              left: -15px;
              top: 0;
              border-right: 1px solid $gray-light;
            }
          }
        }
      }
    }

    & .stock {
      &__item {
        &:last-of-type {
          border-bottom: 1px solid $gray-light;
        }
      }
    }

    &__store-info {
      margin-top: 30px;

      .store-info {
        &__name {
          font-size: 1.25rem;
        }

        &__address {
          flex-direction: row;
          justify-content: space-between;
          align-items: flex-start;

          &-text {
            @include make-col(6)
          }
        }

        &__hide-info,
        &__info {
          font-size: 1rem;
        }

        &__action {
          padding-bottom: 15px;
          width: 100%;
        }

        &__info {
          display: flex;
          flex-wrap: wrap;
        }

        &__open {
          @include make-col(6);
          padding-right: 5px;

          &_title {
            font-size: 1rem;
          }

          &_special {
            padding-right: 0;
            padding-left: 5px;
          }
        }

        &__table {
          font-size: 1rem;

          &_regular {
            .store-info {
              &__table {
                &_cell {
                  padding: 10px 15px 9px;
                }
              }
            }
          }

          &_special {
            .store-info {
              &__table {
                &_day {
                  font-size: .875rem;

                  & .store-info__table_cell {
                    padding-bottom: 15px;
                  }
                }

                &_time {
                  vertical-align: top;
                }

                &_cell {
                  padding: 15px 10px 0;
                }
              }
            }
          }

          &_cell:not(:first-child) {
            white-space: nowrap;
          }
        }
      }
    }
  }
}

@include media-breakpoint-only(sm) {
  .cc-order {
    .store-info {
      &__open {
        max-width: 100%;
        flex: 1;
      }
    }

    &__section-info {
      .store__name {
        max-width: 105px;
      }
    }
  }
}

@include media-breakpoint-only(lg) {
  .cc-order {
    .store-info {
      &__open {
        max-width: 100%;
        flex: 1;
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .cc-order {
    border-top: 2px dotted $gray;

    &__head {
      font-size: 1rem;
    }
  }
}