.#{$dropdown} {
  display: inline-block;
  position: relative;
  cursor: pointer;
  .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: size(8px);
    vertical-align: middle;
    border-width: size(4px);
    border-style: solid;
    border-bottom: none;
    border-right-color: transparent;
    border-left-color: transparent;
  }
  .dropdown-button {
    align-items: center;
    .#{$button} {
      &:not(:only-child) {
        &:first-child {
          border-right: none;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        &:last-child {
          border-left: none;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }
    .caret-button {
      .caret {
        margin: 0;
      }
    }
  }
  
}

.#{$dropdown_popper} {
  --dropdown-padding-x: #{size(map.get($conf_dropdown, 'padding-x'))};
  --dropdown-padding-y: #{size(map.get($conf_dropdown, 'padding-y'))};
  --dropdown-min-height: #{size(map.get($conf_dropdown, 'min-height'))};
  --dropdown-min-width: #{size(map.get($conf_dropdown, 'min-width'))};
  --dropdown-item-padding-x: #{size(map.get($conf_dropdown, 'item-padding-x'))};
  --dropdown-item-padding-y: #{size(map.get($conf_dropdown, 'item-padding-y'))};
  --dropdown-item-height: #{size(map.get($conf_dropdown, 'item-height'))};
  --dropdown-item-bg-color-hover: #{map.get($conf_dropdown, 'item-bg-color-hover')};
  --dropdown-item-font-size: #{size(map.get($conf_dropdown, 'item-font-size'))};
  --dropdown-item-font-color: #{map.get($conf_dropdown, 'item-font-color')};
  --dropdown-item-font-color-hover: #{map.get($conf_dropdown, 'item-font-color-hover')};
  --dropdown-item-icon-size: #{size(map.get($conf_dropdown, 'item-icon-size'))};
  --dropdown-item-icon-color: #{map.get($conf_dropdown, 'item-icon-color')};
  min-width: var(--dropdown-min-width);
  .#{$dropdown_menu} {
    margin: 0;
    padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
    list-style-type: none;

    .#{$dropdown_item} {
      position: relative;
      display: flex;
      align-items: center;
      cursor: pointer;
      color: var(--dropdown-item-font-color);
      font-size: var(--dropdown-item-font-size);
      padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
      min-height: var(--dropdown-item-height);
      @include transition(color var(--duration) var(--timing), background-color var(--duration) var(--timing));

      > div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .#{$icon} {
        color: var(--dropdown-item-icon-color);
        width: var(--dropdown-item-icon-size);
        height: var(--dropdown-item-icon-size);
        margin-right: calc(var(--dropdown-item-icon-size) * 0.5);
      }

      &.hover,
      &:hover {
        color: var(--dropdown-item-font-color-hover);
        background-color: var(--dropdown-item-bg-color-hover);

        .#{$icon} {
          color: var(--dropdown-item-font-color-hover);
        }
      }

      &.is-disabled {
        color: var(--text-light);
        cursor: not-allowed;
      }
    }

    .menu-divider {
      height: var(--border-width);
      margin: size(8px) 0;
      padding: 0;
      overflow: hidden;
      border-top: var(--border-width) solid var(--border-regular);
      pointer-events: none;
    }
  }
}