//
// Hover effects
//

@mixin hover-focus() {
	&:hover,
	&:focus {
	  @content;
	}
  }


  $hover-bg-colors: (
  'body-quaternary': var(--quaternary-bg),
  'body-tertiary': var(--tertiary-bg),
  'body-secondary': var(--secondary-bg),
  'body': var(--body-bg),
  'body-highlight': var(--body-highlight-bg),
  'body-emphasis': var(--emphasis-bg)
) !default;

$hover-text-colors: (
  'body-quaternary': var(--quaternary-color),
  'body-tertiary': var(--tertiary-color),
  'body-secondary': var(--secondary-color),
  'body': var(--body-color),
  'body-highlight': var(--body-highlight-color),
  'body-emphasis': var(--emphasis-color)
) !default;

.hover-elevate-up {
	transition: transform 0.3s ease;

	&:hover {
		transform: translateY(-2.5%);
		transition: transform 0.3s ease;
		will-change: transform;
	}
}

.hover-elevate-down {
	transition: transform 0.3s ease;

	&:hover {
		transform: translateY(2.5%);
		transition: transform 0.3s ease;
		will-change: transform;
	}
}

.hover-scale {
	transition: transform 0.3s ease;

	&:hover {
		transform: scale(1.1);
		transition: transform 0.3s ease;
		will-change: transform;
	}
}

.hover-rotate-end {
	transition: transform 0.3s ease;

	&:hover {
		transform: rotate(4deg);
		transition: transform 0.3s ease;
		will-change: transform;
	}
}

.hover-rotate-start {
	transition: transform 0.3s ease;

	&:hover {
		transform: rotate(-4deg);
		transition: transform 0.3s ease;
		will-change: transform;
	}
}


/* -------------------------------------------------------------------------- */
/*                              Hover  Phoneix                                */
/* -------------------------------------------------------------------------- */

.hover-actions-trigger.btn-reveal-trigger {
	.hover-actions {
	  right: 3rem;
	  [dir='rtl'] & {
		right: 3rem;
	  }
	}
  }

  // project-management
  .todo-list {
	.to-do-list-body {
	  @include media-breakpoint-up(xl) {
		height: 270px;
	  }
	}
  }


.hover-actions {
	// display: none;
	// position: absolute;
	&.show {
	  display: inline-block;

	  & + .hover-hide {
		// opacity: 0;

		opacity: 1;
		transition: opacity 0.3s ease;
	  }
	}
  }

  a[href] {
	&.bg-body-secondary {
	  @include hover-focus {
		background-color: var(--tertiary-bg) !important;
	  }
	}
  }

  // Used in search box
  .text-primary-hover {
	@include hover-focus {
	  color: var(--primary) !important;
	}
  }

  .hover-danger {
	@include hover-focus {
	  color: var(--danger) !important;
	}
  }

  .hover-shadow {
	@include hover-focus {
	  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
	}
  }

  .hover-actions-trigger {
	position: relative;

	// Style for email Inbox
	.inbox-link {
	  color: inherit;
	  text-decoration: none;
	}

	@include hover-focus {
	  .hover-actions {
		z-index: 1;
		display: flex;
		&.btn {
		  display: inline-block;
		}
		animation: fade 0.15s ease-in-out;
	  }

	  .hover-hide {
		opacity: 0;
	  }
	  @each $breakpoint, $value in $grid-breakpoints {
		.hover-#{$breakpoint}-hide {
		  @include media-breakpoint-up($breakpoint) {
			opacity: 0;
		  }
		}
		.hover-#{$breakpoint}-show {
		  @include media-breakpoint-up($breakpoint) {
			opacity: 1;
		  }
		}
	  }
	}
  }

  .bg {
	@each $color, $value in $hover-bg-colors {
	  &-#{$color}-hover {
		&:hover {
		  background-color: #{$value} !important;
		}
	  }
	}
  }

  .text {
	@each $color, $value in $hover-text-colors {
	  &-#{$color}-hover {
		&:hover {
		  color: #{$value} !important;
		}
	  }
	}
  }

  .d-toggle-container {
	.d-none-hover {
	  display: block !important;
	}
	.d-block-hover {
	  display: none !important;
	}
	@include hover-focus {
	  .d-none-hover {
		display: none !important;
	  }
	  .d-block-hover {
		display: block !important;
	  }
	}
  }

  @keyframes fade {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
  }