$dropdown-background: var(--color-white) !default;
$dropdown-color: var(--color-black) !default;
$dropdown-border-width: 1px !default;
$dropdown-border-color: createColor(rgba(205, 205, 205, 0.34)) !default;
$dropdown-border-radius: 0 !default;
$dropdown-shadow: 0 6px 6px createColor(rgba(10, 10, 10, 0.16)) !default;
$dropdown-min-width: 12rem !default;
$dropdown-padding: 10px 0 !default;

$dropdown-link-color: inherit !default;
$dropdown-link-padding: 5px 15px !default;
$dropdown-link-hover-color: inherit !default;
$dropdown-link-hover-background: createColor(rgba(192, 192, 192, 0.09)) !default;

$dropdown-divider-color: createColor(#e9ecef) !default;
$dropdown-divider-margin: 5px 0 !default;

$dropdown-item-color: inherit !default;
$dropdown-item-padding: 5px 15px !default;

$dropdown-arrow-color: createColor(#7284ff) !default;

.dropdown {
  --background-color: #{$dropdown-background};
  --font-color: #{$dropdown-color};
  --border-color: #{$dropdown-border-color};
  --border-width: #{$dropdown-border-width};
  --border-radius: #{$dropdown-border-radius};
  --box-shadow: #{$dropdown-shadow};
  --min-width: #{$dropdown-min-width};
  --padding: #{$dropdown-padding};

  background-color: var(--background-color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  color: var(--font-color);
  cursor: auto;
  left: 0;
  list-style: none;
  margin: 0;
  min-width: var(--min-width);
  opacity: 0;
  padding: var(--padding);
  position: absolute;
  top: 100%;
  text-align: left;
  transform: translateY(-5px);
  transition-duration: 300ms;
  transition-property: opacity, transform, -webkit-transform;
  visibility: hidden;
  z-index: 10;

  &__link {
    --font-color: #{$dropdown-link-color};
    --padding: #{$dropdown-link-padding};
    --hover-font-color: #{$dropdown-link-hover-color};
    --hover-background-color: #{$dropdown-link-hover-background};

    border-radius: 0;
    color: var(--font-color);
    cursor: pointer;
    padding: var(--padding);

    &:hover {
      color: var(--hover-font-color);
      background-color: var(--hover-background-color);
    }
  }

  &__divider {
    --color: #{$dropdown-divider-color};
    --margin: #{$dropdown-divider-margin};

    border-top: 1px solid var(--color);
    margin: var(--margin);
  }

  &__item {
    --font-color: #{$dropdown-item-color};
    --padding: #{$dropdown-item-padding};

    color: var(--font-color);
    padding: var(--padding);
  }
}

.has-dropdown {
  display: inline-flex;
  position: relative;

  a {
    color: inherit;
    display: block;
    text-decoration: none;
    width: 100%;
  }

  &.is-hoverable:hover, &.is-active {
    & > .dropdown {
      display: block;
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
    }
  }

  &.is-right {
    .dropdown {
      right: 0;
      left: unset;
    }
  }

  .has-arrow, &.has-arrow {
    --arrow-color: #{$dropdown-arrow-color};

    padding-right: calculateEm(35) !important;
    position: relative;

    &::after {
      border: 3px solid var(--arrow-color);
      border-radius: 2px;
      border-right: 0;
      border-top: 0;
      content: " ";
      display: block;
      height: 0.625em;
      margin-top: calculateEm(-6.4);
      position: absolute;
      right: calculateEm(15);
      top: 50%;
      transform: rotate(315deg);
      transform-origin: center;
      width: 0.625em;
    }
  }
}