:host {
  @apply block box-border;
}

.modal-title {
  @apply text-center mt-2 text-xl font-bold;
}

.cta-modify {
  @apply self-end bg-transparent text-brand font-bold text-lg outline-none border-none ml-4;
}

.options-wrapper {
  @apply flex flex-row justify-evenly items-stretch mt-2;
}

.option-product-summary {
  @apply flex flex-col box-border;

  hr {
    @apply my-4;
  }
}

.option-name {
  @apply flex flex-row items-center font-bold text-card-sub mb-2 mt-1;

  ui-icon {
    @apply mr-2 text-ucla-blue;
  }
}

.option-branch {
  @apply font-bold;
}

.product-row {
  @apply flex flex-row items-center;
}

.summary-row {
  @apply flex flex-row justify-between font-bold;
}

.reading-points {
  @apply text-ucla-blue;
}

.subtotal {
  @apply text-lg;
}

.shipping-cost {
  @apply text-sm text-right font-normal;
}

img.thumbnail {
  height: 100px;
}

.grow {
  @apply flex-grow;
}

.details {
  @apply ml-4 flex flex-col font-bold self-stretch flex-grow;

  .title {
    @apply text-base m-0;
  }
}

.format {
  @apply flex flex-row items-center whitespace-nowrap;

  img {
    @apply mr-2;
  }
}

.quantity {
  @apply self-end flex flex-col justify-end;

  .row {
    @apply flex flex-row justify-end;
  }
}

.actions {
  @apply flex flex-row justify-end items-center mt-8;
}

.cta-continue-shopping {
  @apply text-brand border-2 border-solid border-brand bg-white font-bold text-lg px-4 py-2 rounded-full;

  ::ng-deep.spin {
    @apply text-brand;
  }

  &:disabled {
    @apply text-inactive-branch border-inactive-branch;
  }
}

.cta-continue,
.cta-upgrade-customer {
  @apply text-white bg-brand font-bold text-lg px-4 py-2 rounded-full border-none ml-4 no-underline;

  &:disabled {
    @apply bg-inactive-branch;
  }
}

.can-add-error {
  @apply text-xl text-dark-goldenrod mt-2;
}

.quantity-error {
  @apply text-dark-goldenrod font-bold text-sm mt-2;
}

.hint {
  @apply text-dark-goldenrod font-bold text-xl;
}
