:host {
  @apply flex flex-row box-border items-center text-base;
}

.backdrop {
  @apply w-full h-full absolute top-0 left-0;
}

.quantity-control-wrapper {
  @apply relative w-11;
}

button.action {
  @apply bg-white text-brand font-bold text-base outline-none border-none pr-0;

  &:disabled {
    @apply text-inactive-customer;
  }
}

button.current-quantity {
  @apply flex flex-row justify-between items-center bg-white text-base outline-none border-none text-left font-bold w-full px-0 mx-0;

  ui-icon {
    @apply ml-2;
  }
}

input.current-quantity {
  @apply bg-white text-base outline-none border-none text-left font-bold w-full;
}

.quantity-list {
  @apply flex flex-col bg-white rounded-card absolute -top-12 left-0 right-0 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;
}

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

.dp {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1));
  border-radius: 3px;
  width: 350px;

  .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;
    }
  }
}
