:root {
  --dropdown-bg-color: theme('colors.white');
  
  // button
  --dropdown-button-icon-color: theme('colors.gray.500');

  // button activator
  --dropdown-button-activator-gap: theme('spacing.2');

  // item
  --dropdown-item-color: theme('colors.gray.800');
  --dropdown-item-icon-color: theme('colors.gray.600');
  --dropdown-item-gap: theme('spacing.2');
  --dropdown-item-border-radius: theme('borderRadius.md');
  --dropdown-item-padding: theme('spacing.2');

  // item active
  --dropdown-item-active-color: currentColor;
  --dropdown-item-active-bg-color: theme('colors.gray.200');

  // item icon
  --dropdown-item-icon-width: theme('width.5');
  --dropdown-item-icon-height: theme('height.5');
  --dropdown-item-icon-color: currentColor;

  // panel
  --dropdown-panel-bg-color: theme('colors.white');
  --dropdown-panel-border-radius: theme('borderRadius.md');
  --dropdown-panel-box-shadow: theme('boxShadow.lg');
  --dropdown-panel-z-index: theme('zIndex.10');
  --dropdown-panel-padding: theme('spacing.1');
  --dropdown-panel-width: theme('width.56');
  --dropdown-panel-margin-top: theme('spacing.2');

  // divider
  --dropdown-divider-border-color: theme('colors.gray.200');
}

.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;

  &-panel {
    position: absolute;
    z-index: var(--dropdown-panel-z-index);
    padding: var(--dropdown-panel-padding);
    width: var(--dropdown-panel-width);
    margin-top: var(--dropdown-panel-margin-top);
    background-color: var(--dropdown-panel-bg-color);
    border-radius: var(--dropdown-panel-border-radius);
    box-shadow: var(--dropdown-panel-box-shadow);

    &:focus {
      outline: none;
    }
  }

  &-divider {
    height: theme('height.1');
    border-bottom-width: theme('borderWidth.DEFAULT');
    border-bottom-color: var(--dropdown-divider-border-color);
    border-bottom-style: solid;
    margin-top: theme('margin.1');
    margin-bottom: theme('margin.1');
    margin-left: -4px;
    margin-right: -4px;
  }

  &-item {
    display: flex;
    gap: var(--dropdown-item-gap);
    border-radius: var(--dropdown-item-border-radius);
    align-items: center;
    width: 100%;
    padding: var(--dropdown-item-padding);
    color: var(--dropdown-item-color);
    background-color: var(--dropdown-item-bg-color);

    &--active {
      --dropdown-item-color: var(--dropdown-item-active-color);
      --dropdown-item-bg-color: var(--dropdown-item-active-bg-color);
    }

    &-icon {
      width: var(--dropdown-item-icon-width);
      height: var(--dropdown-item-icon-height);
      color: var(--dropdown-item-icon-color);
    }
  }

  &-button-icon {
    color: var(--dropdown-button-icon-color);
  }

  &-button-activator {
    display: flex;
    align-items: center;
    gap: var(--dropdown-button-activator-gap);
  }
}