@if $css-variable-enabled {
  $dropdown-border-radius: var(--dropdown-border-radius);
  $dropdown-child-margin: var(--dropdown-child-margin);
  $dropdown-child-padding: var(--dropdown-child-padding);
  $dropdown-item-border-radius: var(--dropdown-item-border-radius);
  $dropdown-item-margin: var(--dropdown-item-margin);
  $dropdown-item-padding: var(--dropdown-item-padding);
  $dropdown-margin: var(--dropdown-margin);
  $dropdown-padding: var(--dropdown-padding);
  $dropdown-shadow: var(--dropdown-shadow);
  $dropdown-translate: var(--dropdown-translate);
  $dropdown-z-index: var(--dropdown-z-index);
  $medium-text: var(--medium-text);
}
$cssvar: $css-variable-enabled;

@mixin drop-label {
  > span {
    margin: 6px 10px;
    display: inline-block;
    color: var(--text-color-primary);
    font-size: calc(#{$medium-text} + 2px);
  }
}

.#{$prefix}dropdown {
  position: relative;
  display: inline-block;

  &:not(.#{$prefix}center-aligned) {

    &:focus-within > .#{$prefix}items,
    &.#{$prefix}hover:hover > .#{$prefix}items,
    &.#{$prefix}active > .#{$prefix}items {
      transition: all 0.2s ease-in-out 0.1s, visibility 0s linear 0s;
      visibility: visible !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }

  &.#{$prefix}left-aligned > .#{$prefix}items {
    left: 0 !important;
    right: auto !important;
  }

  &.#{$prefix}right-aligned > .#{$prefix}items {
    left: auto !important;
    right: 0 !important;
  }

  &.#{$prefix}center-aligned.#{$prefix}upside {
    > .#{$prefix}items {
      left: 50%;
      transform: translate(-50%, if($cssvar, calc(0px - #{$dropdown-translate}), - $dropdown-translate)) !important;
    }

    &:focus-within > .#{$prefix}items,
    &.#{$prefix}hover:hover > .#{$prefix}items,
    &.#{$prefix}active > .#{$prefix}items {
      transition: all 0.2s ease-in-out 0.1s, visibility 0s linear 0s;
      visibility: visible !important;
      opacity: 1 !important;
      transform: translate(-50%, 0) !important;
    }
  }

  &.#{$prefix}center-aligned:not(.#{$prefix}upside) {
    > .#{$prefix}items {
      left: 50%;
      transform: translate(-50%, $dropdown-translate) !important;
    }

    &:focus-within > .#{$prefix}items,
    &.#{$prefix}hover:hover > .#{$prefix}items,
    &.#{$prefix}active > .#{$prefix}items {
      transition: all 0.2s ease-in-out 0.1s, visibility 0s linear 0s;
      visibility: visible !important;
      opacity: 1 !important;
      transform: translate(-50%, 0) !important;
    }
  }

  hr[divider] {
    border-bottom-style: none;
    border-left-style: none;
    border-right-style: none;
    opacity: 1;
  }

  .#{$prefix}items {
    top: 100%;
    left: 0;
    bottom: auto;
    margin: 0;
    margin-left: 5px;
    box-sizing: content-box;
    position: absolute;
    list-style: none;
    border-style: solid;
    border-width: 2px;
    border-color: var(--dropdown-border-color);
    visibility: hidden;
    opacity: 0;
    background-color: var(--dropdown-bg-color);
    transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.3s;
    height: fit-content;
    width: 150px;
    transform: translateY($dropdown-translate);
    border-radius: $dropdown-border-radius;
    z-index: $dropdown-z-index;
    box-shadow: $dropdown-shadow;
    padding: $dropdown-padding;
    margin-top: if($cssvar, calc(#{$dropdown-margin} - 4px), $dropdown-margin - 4px);

    @include drop-label;

    .#{$prefix}center-aligned & {
      transform: translateY($dropdown-translate);
    }

    // Sizes
    &.#{$prefix}narrow {
      width: 50px !important;
    }

    &.#{$prefix}small {
      width: 100px !important;
    }

    &.#{$prefix}large {
      width: 200px !important;
    }

    &.#{$prefix}xlarge {
      width: 300px !important;
    }

    p {
      text-align: left;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    li {
      position: relative;
      user-select: none;
      display: flex;
      align-items: center;
      color: var(--text-color-secondary);
      list-style: none;
      text-align: left;
      transition: background-color 0.5s;
      box-sizing: content-box;
      border-radius: $dropdown-item-border-radius;
      padding: $dropdown-item-padding;
      margin: $dropdown-item-margin;

      &:hover, &.#{$prefix}hovered {
        background-color: var(--dropdown-option-hovered-color);

        > ul {
          transition: all 0.2s ease-in-out 0.1s, visibility 0s linear 0s;
          visibility: visible !important;
          opacity: 1 !important;
          transform: none !important;
        }
      }

      &[active], &.#{$prefix}active {
        background-color: var(--dropdown-active-item-bg-color);
        color: var(--dropdown-active-item-text-color);

        &:hover, &.#{$prefix}hovered {
          background-color: var(--dropdown-active-item-bg-color);
        }
      }

      ul {
        position: absolute;
        top: 0;
        left: 100%;
        margin: 0;
        width: 150px;
        border-style: solid;
        border-width: 2px;
        border-color: var(--dropdown-border-color);
        visibility: hidden;
        opacity: 0;
        background-color: var(--dropdown-bg-color);
        transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.3s;
        height: fit-content;
        box-sizing: content-box;
        margin-left: $dropdown-child-margin;
        transform: translateX($dropdown-translate);
        border-radius: $dropdown-border-radius;
        z-index: $dropdown-z-index;
        box-shadow: $dropdown-shadow;
        padding: $dropdown-child-padding;

        @include drop-label;
      }

      // Sizes
      &.#{$prefix}narrow > ul {
        width: 50px !important;
        text-align: center;

        > li {
          justify-content: center;
        }
      }

      &.#{$prefix}small > ul {
        width: 100px !important;
      }

      &.#{$prefix}large > ul {
        width: 200px !important;
      }

      &.#{$prefix}xlarge > ul {
        width: 300px !important;
      }
    }
  }

  // Upside
  &.#{$prefix}upside {
    > .#{$prefix}items {
      top: auto;
      bottom: 100%;
      margin: 0;
      margin-left: 5px;
      margin-bottom: if($cssvar, calc(#{$dropdown-margin} - 4px), $dropdown-margin - 4px);
      transform: translateY(if($cssvar, calc(0px - #{$dropdown-translate}), - $dropdown-translate));
    }

    li ul {
      bottom: 0 !important;
      top: auto !important;
      margin-right: $dropdown-child-margin;
    }
  }

  // Nested Dropdown Upside
  .#{$prefix}upside > ul {
    bottom: 0 !important;
    top: auto !important;
  }

  // All Nested
  .#{$prefix}nested-upside ul {
    bottom: 0 !important;
    top: auto !important;
  }

  // Down Side
  // Nested Dropdown Downside
  .#{$prefix}downside > ul {
    top: 0 !important;
    bottom: auto !important;
  }

  // All Nested
  .#{$prefix}nested-downside ul {
    top: 0 !important;
    bottom: auto !important;
  }

  // Rightside
  &.#{$prefix}rightside > .#{$prefix}items {
    top: 0 !important;
    left: 100% !important;
    right: auto !important;
    margin: 0;
    margin-top: 5px !important;
    margin-left: if($cssvar, calc(#{$dropdown-margin} - 4px), $dropdown-margin - 4px);
    transform: translateX($dropdown-translate) !important;
  }

  // Nested Dropdown Rightside
  .#{$prefix}rightside > ul {
    left: 100% !important;
    right: auto !important;
    margin: 0 !important;
    margin-top: 5px !important;
    margin-left: $dropdown-child-margin !important;
    transform: translateX($dropdown-translate) !important;
  }

  // All Nested
  .#{$prefix}nested-rightside ul {
    left: 100% !important;
    right: auto !important;
    margin: 0 !important;
    margin-top: 5px !important;
    margin-left: $dropdown-child-margin !important;
    transform: translateX($dropdown-translate) !important;
  }

  // Leftside
  &.#{$prefix}leftside > .#{$prefix}items {
    top: 0;
    right: 100%;
    left: auto;
    margin: 0;
    margin-top: 5px;
    margin-right: if($cssvar, calc(#{$dropdown-margin} - 4px), $dropdown-margin - 4px);
    transform: translateX(if($cssvar, calc(0px - #{$dropdown-translate}), - $dropdown-translate));

    li ul {
      left: auto !important;
      right: 100% !important;
      margin-right: $dropdown-child-margin !important;
      transform: translateX(if($cssvar, calc(0px - #{$dropdown-translate}), - $dropdown-translate)) !important;
    }
  }

  // Nested Dropdown Leftside
  .#{$prefix}leftside > ul {
    left: auto !important;
    right: 100% !important;
    margin-right: $dropdown-child-margin !important;
    transform: translateX(if($cssvar, calc(0px - #{$dropdown-translate}), - $dropdown-translate)) !important;
  }

  // All Nested
  .#{$prefix}nested-leftside ul {
    left: auto !important;
    right: 100% !important;
    margin-right: $dropdown-child-margin !important;
    transform: translateX(if($cssvar, calc(0px - #{$dropdown-translate}), - $dropdown-translate)) !important;
  }

  // Sizes
  &.#{$prefix}narrow > .#{$prefix}items {
    width: 50px !important;
    text-align: center;

    > li {
      justify-content: center;
    }
  }

  &.#{$prefix}small > .#{$prefix}items {
    width: 100px !important;
  }

  &.#{$prefix}large > .#{$prefix}items {
    width: 200px !important;
  }

  &.#{$prefix}xlarge > .#{$prefix}items {
    width: 300px !important;
  }
}