/**
* Map + Leaflet Filter Styling
*
* shortcode [cb_map]
* 
*
* @package   CommonsBooking
* @author    Florian Egermann <florian@wielebenwir.de>
* @license   GPL-2.0+
* @since     2.0
* @link      http://www.wielebenwir.de
* @copyright 2020 wielebenwir
*/

@use "../../../global/sass/partials/variables";
@use "../../../global/sass/partials/extends";
@use "layouts";

.cb-wrapper {	
	
	/* Leaflet Map */
	&.leaflet-container {
		
		.cb-map-marker-cluster-icon {
			  width: 100% !important;
			  height: 100% !important;
			  font-weight: bold !important;
			  background-size: cover;
			}
			
		.cb-map-location-info-name b {
			line-height: 25px;
		}
		.cb-map-location-info-name a {
			color: var(--commonsbooking-color-primary);
		}
		.cb-map-location-info-name span.dashicons-search {
			cursor: pointer;
			padding-left: 5px;
			padding-top: 2.5px;
		}
		
		.cb-map-location-info-opening-hours {
			margin-top: 10px;
		}
		
		.cb-map-location-info-contact {
			margin-top: 10px;
		}

        .cb-map-location-info-address {
            color: var(--commonsbooking-textcolor-dark);
        }
		
		.highlight-border {
			border-color: rgb(238, 116, 0) !important;
		}
		
		.leaflet-bar button {
			font-size: 6.5px;
		}
			
	}

	/* Popup */
	.leaflet-popup-content {
		  min-width: 300px;
		  font-size: var(--commonsbooking-font-size-normal);
		  
		.cb-map-popup-item {
			  margin-top: 10px;
			}
			
			.cb-map-popup-item-thumbnail {
			  display: inline-block;
			  width: 25%;
			  margin-right: 5%;
			  img {
			  	border-radius: var(--commonsbooking-radius);
			  }
			}
			
			.cb-map-popup-item-info {
			  display: inline-block;
			  width: 70%;
			  vertical-align: top;
			}
			
			.cb-map-popup-item-link b a {
				font-size: var(--commonsbooking-font-size-big);
				color: var(--commonsbooking-color-primary);
				text-decoration: underline;
			}
			
			.cb-map-popup-item-availability {
			  display: flex;
			  flex-wrap: nowrap;
			  overflow-x: auto;
			
			  -webkit-overflow-scrolling: touch;
			  margin: 3px 0;
			}
			
			.cb-map-popup-item-availability-day {
			  flex: 0 0 auto;
			
			  color: var(--commonsbooking-textcolor-dark);
			  font-weight: normal;
			  padding: 3px;
			
			  width: 30px;
			  text-align: center;
			  border: 1px solid #fff;
			
			  border-radius: 7px;
			  background-clip: padding-box;
			}
			
			.cb-map-popup-item-availability-day.available {
			  background-color: var(--commonsbooking-color-accept)
			}
			.cb-map-popup-item-availability-day.location-holiday {
			  background: linear-gradient(135deg, var(--litepickerDayIsHolidayColorBg) 11.25%, #ffff 11.25%, #ffff 38.75%, var(--litepickerDayIsHolidayColorBg) 38.75%, var(--litepickerDayIsHolidayColorBg) 61.25%, #ffff 61.25%, #ffff 88.75%, var(--litepickerDayIsHolidayColorBg) 88.75%);
			  background-size: 8px 8px;
			  color: #222222a1;
			}
			.cb-map-popup-item-availability-day.locked {
				background-color: #ddd;
                color: var(--commonsbooking-textcolor-light);
			  }
			.cb-map-popup-item-availability-day.no-timeframe {
			  background-color: var(--commonsbooking-color-greyedout);
              color: var(--commonsbooking-textcolor-light);
			  cursor: not-allowed;
			}
			.cb-map-popup-item-availability-day.partially-booked{
				color: #444;
				background: linear-gradient(to top left, var(--commonsbooking-color-accept) 0%, var(--commonsbooking-color-accept) calc(50% - 1px), #333 50%, var(--commonsbooking-color-cancel) calc(50% + 1px), var(--commonsbooking-color-cancel) 100%);
				background-repeat: no-repeat;

			}
			.cb-map-popup-item-availability-day.booked {
			  color: #444;
			  background: linear-gradient(to top left, var(--commonsbooking-color-cancel) 0%, var(--commonsbooking-color-cancel) calc(50% - 1px), #333 50%, var(--commonsbooking-color-cancel) calc(50% + 1px), var(--commonsbooking-color-cancel) 100%);
			}
	}

}

/* Filters */
.cb-map-filters.cb-wrapper {
	
	margin-top: var(--commonsbooking-spacer);
	@extend .cb-box;
	
	input[type="checkbox"] {
		margin: 0 var(--commonsbooking-spacer-small) 0 0;
	}
	
	input[type="date"], input[type="number"] { /* is inline */ 
		margin: 0 var(--commonsbooking-spacer-small);
	}
	
	 input[type="number"] { 
		max-width: 100px;
	}
	
	 select { /* is inline */ 
		margin: 0 var(--commonsbooking-spacer-small);
	}
	
	button {
		padding: var(--commonsbooking-spacer-small);
	}
	
	.cb-filter-options {
		> div {
			margin-bottom: var(--commonsbooking-spacer);
			padding-bottom: var(--commonsbooking-spacer);
			border-bottom: 1px solid variables.$color-gray-dark;
		}
	}

	.cb-map-filter-group-label {
		@extend .cb-big;
		color: var(--commonsbooking-color-primary);
		margin-bottom: var(--commonsbooking-spacer-small);
	}
	
		
	/* layout for filter  availability & distance */
	.cb-map-availability-filter,
	.cb-map-distance-filter {
		.cb-map-filter-group {
			@extend .cb-col-50-50-filter;
			}
	}
	
	/* styles for specific filters */
	.cb-map-distance-filter {
		.cb-map-filter-input-group {
			background: var(--commonsbooking-color-secondary);
			border-radius: var(--commonsbooking-radius);
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			input {
				flex: 1 1 100% !important; /* overwrite layout */
			}
			button.undo-geo-search, button.geo-search {
				background: transparent;
				color: variables.$color-white;
			}
		}
	}
	
	/* layout for filter category */
	.cb-map-category-filter{
		.cb-map-filter-group{		
			display:flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
			fieldset { // category filter
				flex: 1 0 50%;
				border: none;
				margin: 0;
				padding: 0;
				margin-bottom: var(--commonsbooking-spacer);
				
				.cb-fieldgroup-row {
					display: inline-block;
				}
			
				legend {
					margin: 0;
					padding: 0;
					font-weight: normal;
				}
				label {
					margin-right: var(--commonsbooking-spacer-big);
					color: var(--commonsbooking-color-primary);
				}
	
			}
		}
	}
	
	.cb-map-button-wrapper {
		text-align: right;
		button {
			@extend .cb-button;
		}
	}
}