.quantity-list {
  @apply flex flex-col bg-white rounded-card shadow-card z-dropdown;

  button.quantity-list-item {
    @apply flex flex-row justify-between items-center outline-none border-none bg-white px-4 py-2 text-base text-left;

    &:first-child {
      @apply rounded-t-card;
    }

    &:last-child {
      @apply rounded-b-card;
    }

    &.selected {
      @apply bg-disabled-customer;
    }
  }
}

.del {
  @apply text-brand text-center;
}

.r90deg {
  @apply transform rotate-90 text-ucla-blue;
}

.r-90deg {
  @apply transform -rotate-90 text-ucla-blue;
}

.close-btn {
  @apply border-none outline-none bg-transparent;
}

::ng-deep .branch ui-quantity-dropdown button.action:disabled {
  @apply text-inactive-branch;
}

.qp {
  @apply w-24;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1));
  border-radius: 3px;

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

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

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

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

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