/*
  @project: monepi/administrateur
  @create: 22 Nov 2020
  @description: Dropdown stylesheet
  This is just an override of dropdown provided by Bootstrap
*/

/* ----------------------------------------------------------------------------- == SUMMARY */
/*
  1. Dropdown
    1.a. green
    1.b. pink
    1.c. orange
    1.d. white
    1.1. dropdown-toggle
    1.2. Dropdown-menu
      1.2.1. Dropdown-item
*/

/* ----------------------------------------------------------------------------- == Dropdown */
.Dropdown {
  display: block;
  min-width: 200px;
  position: relative;
}

.Dropdown .dropdown-toggle,
.Dropdown .dropdown-menu:after {
  background-color: var(--blue-500);
  transition: all 100ms;
  transition-timing-function: var(--ease-in);
}

.dropdown-toggle:hover,
.dropdown-toggle:hover + .dropdown-menu:after {
  background-color: var(--blue-700);
  color: var(--grey-300);
  transition-timing-function: var(--ease-in);
}

.Dropdown.green .dropdown-toggle,
.Dropdown.green .dropdown-menu:after {
  background-color: var(--green-500);
}

.Dropdown.green .dropdown-toggle:hover,
.Dropdown.green .dropdown-toggle:hover + .dropdown-menu:after {
  background-color: var(--green-700);
}

.Dropdown.pink .dropdown-toggle,
.Dropdown.pink .dropdown-menu:after {
  background-color: var(--pink-500);
}

.Dropdown.pink .dropdown-toggle:hover,
.Dropdown.pink .dropdown-toggle:hover + .dropdown-menu:after {
  background-color: var(--pink-700);
}

.Dropdown.orange .dropdown-toggle,
.Dropdown.orange .dropdown-menu:after {
  background-color: var(--orange-500);
}

.Dropdown.orange .dropdown-toggle:hover,
.Dropdown.orange .dropdown-toggle:hover + .dropdown-menu:after {
  background-color: var(--orange-700);
}

.Dropdown.white .dropdown-toggle,
.Dropdown.white .dropdown-menu:after {
  background-color: var(--white);
  color: var(--grey-600);
}

.Dropdown.white .dropdown-toggle:hover,
.Dropdown.white .dropdown-toggle:hover + .dropdown-menu:after {
  background-color: var(--grey-100);
}

/* ----------------------------------------------------------------------------- == dropdown-toggle */
.Dropdown .dropdown-toggle {
  width: 100%;
}

.Dropdown .dropdown-toggle:after {
  display: none;
}

.Dropdown .dropdown-toggle .Button-icon {
  margin: -12px -18px -12px 0;
}

/* ----------------------------------------------------------------------------- == dropdown-menu */
.Dropdown .dropdown-menu {
  border: none;
  left: 10px !important;
  margin: 0;
  padding: 15px 0;
  position: absolute;
  right: 10px;
  top: 100% !important;
  transform: translateY(0) !important;
  z-index: inherit !important;
}

.Dropdown .dropdown-item {
  color: var(--grey-600);
  font-size: 1.08rem;
  letter-spacing: -0.19px;
  line-height: 1.4em;
  padding: 12px 25px;
  position: relative;
  z-index: 2;
}

.Dropdown .dropdown-item:hover {
  background-color: var(--grey-100);
}

.Dropdown .dropdown-item:active {
  background-color: var(--grey-300);
}

.Dropdown .dropdown-menu:before {
  background-color: var(--white);
  border-radius: 10px;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.Dropdown .dropdown-menu:after {
  border-radius: 10px;
  bottom: -10px;
  content: '';
  left: -10px;
  position: absolute;
  right: -10px;
  top: -10px;
  z-index: -1;
}