@import "vars";

// page-aside
// =================================

.page-aside {
  width: 50%;
  background-color: #f3f7f9;
  transition: visibility .1s ease,top .3s ease,left .5s ease,right .5s ease,width .5s;
}

.page-aside-inner {
  height: 100%;
}

.page-aside-switch {
  left: calc(100% - 1px);
}

.page-nav-tabs {
  padding: 0;
  background-color: $inverse;
  .nav-tabs {
    padding: 0 30px;
  }
}

//page-aside-content
.page-aside-content {
  height: calc(100% - 44px);
  .tab-pane {
    height: 100%;
  }
}

.spots-list,.hotels-list {
  margin: 0;
  padding-right: 15px;
  padding-top: 15px;
  .card {
    margin-bottom: 15px;
  }
}

.spot-info,.hotel-info {
  padding: 0;
  padding-left: 15px;
  cursor: pointer;
}

//spot-info
.spot-info {
  .card-text.type-link a {
    color: $color-green-500;
  }

  .card-actions {
    .text-active {
      display: none;
    }

    &.active {
      .text {
        display: none;
      }
      .text-active {
        display: inline-block;
        color: $color-pink-600;
      }
    }
  }

  .item-title {
    display: inline-block;
  }

  .item-name {
    font-size: 14px;
    font-weight: 300;
    color: $color-blue-grey-500;
  }
}

// hotel-info
.hotel-info .card{
  height: 240px;
}

.hotel-img {
  display: none;
}

// reviews-list
.reviews-header {
  padding: 10px 30px;
  border-bottom: 1px solid $color-blue-grey-200;
  p {
    margin: 0;
  }
}

.reviews-list {
  padding: 0;
  margin: 0;
  list-style: none;

  .review-info {
    border-bottom: 1px solid $color-blue-grey-200;
    cursor: pointer;
    &:hover {
      border-bottom: 1px solid $color-blue-grey-200;
    }
    &.last-review {
      border-bottom: none;
      &:hover {
        border-bottom: none;
      }
    }
  }
}

.percent {
  margin-right: 5px;
  font-weight: 400;
  color: $color-green-500;
}

// page-main
// ===================================

.page-main {
  position: relative;
  left: 50%;
  width: 50%;
}

// map
#map {
  height: 100%;
}

.in-map-markers {
  display: inline-block;
}

.marker-icon {
  position: relative;
  display: inline-block;
  border: 3px solid $color-blue-600;
  border-radius: 50%;
  transition: 0.4s ease-in-out all;

  img {
    width: 62px;
    height: 62px;
    border-radius: 50%;
  }
  &::before {
    content: "";
    position: absolute;
    top: 58px;
    left: 10px;
    z-index: -1;
    height: 0;
    width: 0;
    border-width: 17px 21px 0;
    border-color: $color-blue-600 transparent transparent;
    border-style: solid;
    transition: 0.4s ease-in-out all;
  }
  &:hover {
    border-color: $color-blue-400;
  }
  &:hover::before {
    border-color: $color-blue-400 transparent transparent;
  }

  .marker-active & {
    border-color: $color-blue-400;
    &::before {
      border-color: $color-blue-400 transparent transparent;
    }
  }
}

.marker-cluster-small {
  background-color: rgba(162, 202, 238, .6);
  & > div {
    background-color: rgba(98, 168, 234, .6);
  }
  span {
    color: #fff;
  }
}

.detail {
  background-color: $color-blue-400!important;
}

.leaflet-popup-pane:hover h3 {
  color: $color-blue-400!important;
}

// media
// ============================================

// hotel card
@include media-breakpoint-between(lg,xl) {
  .hotel-info {
    .card {
      height: 280px;
    }
  }
}

//review text
@include media-breakpoint-down(md) {
  .page-aside .list-group-item {
    white-space: inherit;
  }
}

@include media-breakpoint-down(sm){
  //page-aside switch
  .page-aside {
    width: 0;
    + .page-main {
      width: 100%;
      left: 0;
    }
    &.open {
      width: 300px;
    }
  }

  .page-aside-inner {
    overflow: hidden!important;
  }

  .nav-tabs {
    padding: 0 20px;

    .nav-link {
      padding: 10px 12px;
    }
  }

  //review rating show
  .reviews-list {
    .list-group-item {
      padding: 13px 10px;
    }
  }
}