.ui-dropdown-panel {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1));

  @apply relative;

  .ui-dropdown-wrapper {
    @apply flex flex-col bg-white rounded-card;
  }

  [uiDropdownItem] {
    @apply bg-white text-base outline-none border-none px-4 py-3 text-left;
  }

  [uiDropdownItem]:first-child {
    @apply rounded-t-card;
  }

  [uiDropdownItem]:last-child {
    @apply rounded-b-card;
  }

  [uiDropdownItem]:hover,
  [uiDropdownItem]:focus {
    @apply bg-disabled-customer;
  }
}

.branch .ui-dropdown-panel {
  [uiDropdownItem]:hover,
  [uiDropdownItem]:focus {
    @apply bg-disabled-branch;
  }
}

.ui-dropdown-panel {
  .triangle {
    width: 30px;
    z-index: -1;
    polygon {
      fill: white;
    }
  }

  /* triangle top right*/
  &.x-position-after.y-position-below {
    margin-top: 11px;
    .triangle {
      @apply absolute;
      top: -10px;
      right: 2px;
    }
  }

  /* triangle top left*/
  &.x-position-before.y-position-below {
    margin-top: 11px;
    .triangle {
      @apply absolute;
      top: -10px;
      left: 2px;
    }
  }

  /* triangle bottom left*/
  &.x-position-before.y-position-above {
    margin-bottom: 11px;
    .triangle {
      @apply absolute  transform rotate-180 origin-center;
      bottom: -10px;
      left: 2px;
    }
  }

  /* triangle bottom right*/
  &.x-position-after.y-position-above {
    margin-bottom: 11px;
    .triangle {
      @apply absolute transform rotate-180 origin-center;
      bottom: -10px;
      right: 2px;
    }
  }
}

::ng-deep ui-dropdown .ui-dropdown-wrapper button {
  @apply text-brand;

  &:hover,
  &:focus {
    @apply bg-glitter;
  }
}
