@import "bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
@import "variables";

.dropdown-menu {
	background: $white;
	border: 0;
	border-radius: $border-radius-base;
	box-shadow: 0 2px 8px rgba($primary, .1);
	margin: -10px 0 0 10px;
	padding: 0;
	position: absolute;
}

.dropdown-menu li {
	margin: 0;
	padding: 0;

	&:first-child {
		margin-top: 12px;
	}

	&:last-child {
		margin-bottom: 12px;
	}
}

.dropdown-menu li a,
.dropdown-menu li button {
	@include anim(color);
	font-family: $font-primary;
	font-weight: 600;
	color: rgba($primary, 0.8);
	font-size: 12px;

	display: block;
	padding: 10px 40px;
	text-decoration: none;
	width: 100%;
	white-space: nowrap;

	&:hover,
	&:focus {
		color: $accent;
	}
}

/* ==========================================================================
	 Dropdown menu icon
	 ========================================================================== */

.dropdown-icon .dropdown-menu {
	list-style: none;
	padding: 12px 0;
}

.dropdown-icon .dropdown-menu li {
	&:first-child {
		margin-top: 0px;
	}

	&:last-child {
		margin-bottom: 0px;
	}
}

.dropdown-icon .dropdown-menu li a,
.dropdown-icon .dropdown-menu li button {
	@include anim(all);
	color: rgba($primary, .8);
	font-size: 12px;
	margin: 0;
	padding: 0 20px;
	line-height: 36px;

	span {
		@include anim(color);
		color: rgba($primary, .8);
		display: inline-block;
		margin-right: 20px;
		position: relative;
		text-align: center;
		top: 1px;
		width: 14px;
	}

	&:hover,
	&:focus {
		background-color: rgba($accent, .1);
		color: $accent;

		span {
			color: $accent;
		}
	}
}

.dropdown.dropdown-logs {
	.icon {
		line-height: 34px;
		margin-right: 20px;
		display: inline-block;
		position: relative;
		top: 1px;
	}

	.icon-red {
		color: $color-red;
	}
	.icon-orange {
		color: $color-orange;
	}
	.icon-yellow {
		color: $color-yellow;
	}
	.icon-primary {
		color: rgba($primary, 0.8);
	}
}

/* ==========================================================================
	 Dropdown filter
	 ========================================================================== */
.dropdown.dropdown-filter {
	display: inline-block;
}

.dropdown.dropdown-filter .btn.btn-default {
	border-radius: 4px;
	height: 48px;
	line-height: 48px;
	padding: 0 33px 0 12px;
	margin: 0;
	font-size: 14px;
	font-family: $font-primary;
	font-weight: 700;
	position: relative;
	text-align: left;
}

.dropdown.dropdown-filter .btn.btn-default [class*="icon-12-"] {
	line-height: 46px;
	position: absolute;
	right: 12px;
}

.dropdown.dropdown-filter .dropdown-menu {
	margin: 0px;
	padding: 12px 0;
	top: 100%;
	left: 0;
	min-width: 100%;
}

.dropdown.dropdown-filter .dropdown-menu li {
	margin: 0;
	padding: 0;
}

.dropdown.dropdown-filter .dropdown-menu li a {
	border-bottom-width: 0px;
	color: rgba($primary, 0.8);
	font-family: $font-primary;
	font-weight: 600;
	font-size: 12px;
	padding: 0 20px;
	line-height: 36px;
}

.dropdown.dropdown-filter .dropdown-menu li a:hover {
	color: $accent;
	background-color: rgba($accent, 0.1);
}

/* ==========================================================================
	Dropdown settings
	========================================================================== */
.dropdown.dropdown-settings {
	display: flex;
	justify-content: flex-end;
	padding: 0 20px 0 0;
}

.dropdown.dropdown-settings .btn-icon {
	display: block;
	border-radius: 4px;
	margin: 0;
	line-height: 48px;
	padding: 0 12px;
	width: 46px;
}

.dropdown.dropdown-settings .dropdown-menu {
	right: 20px;
	left: auto;
	margin: 0;
	list-style: none;
	padding: 12px 0;
}

.dropdown.dropdown-settings .dropdown-menu li {
	margin: 0;
}

.dropdown.dropdown-settings .dropdown-menu li a {
	border-bottom-width: 0px;
	color: rgba(14, 20, 26, 0.8);
	font-family: $font-primary;
	font-weight: 600;
	font-size: 12px;
	margin: 0;
	padding: 0 20px;
	line-height: 36px;

	transition: all 0.3s ease-in-out;
}

.dropdown.dropdown-settings .dropdown-menu li a:hover {
	color: $accent;
	background-color: rgba($accent, 0.1);
}

.dropdown.dropdown-settings .dropdown-menu li a span {
	color: rgba(14, 20, 26, 0.8);
	display: inline-block;
	margin-right: 20px;
	position: relative;
	text-align: center;
	top: 1px;
	width: 14px;

	transition: color 0.3s ease-in-out;
}

.dropdown.dropdown-settings .dropdown-menu li a:hover span {
	color: $accent;
}

/* ==========================================================================
	Dropdown Confirmation
	========================================================================== */
.dropdown.dropdown-confirmation .btn [class^="icon-12-"],
.dropdown.dropdown-confirmation .btn [class*="icon-12-"] {
	line-height: 36px;
}

.dropdown.dropdown-confirmation .dropdown-menu {
	width: 218px;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
	margin: 0;
	list-style: none;
	padding: 12px;
	text-align: center;
}

.dropdown.dropdown-confirmation .dropdown-menu h3 {
	color: rgba($primary, 0.8);
	font-size: 14px;
	font-family: $font-primary;
	font-weight: 700;
}

.dropdown.dropdown-confirmation .dropdown-menu p {
	color: rgba($primary, 0.4);
	font-size: 11px;
	font-family: $font-secondary;
	font-weight: 600;
}

.dropdown.dropdown-confirmation .dropdown-menu .btn {
	width: calc(50% - 6px);
	height: 36px;
	margin-right: 12px;
	font-size: 12px;
	font-family: $font-primary;
	font-weight: 600;
	line-height: 36px;
	padding: 0;
}

.dropdown.dropdown-confirmation .dropdown-menu .btn:last-child {
	margin-right: 0;
}