:host {
  @apply block box-border relative;
}

h3 {
  @apply text-regular font-semibold text-center;
}

hr {
  @apply border-branch h-px-2 -ml-4;
  width: calc(100% + 2rem);
}

.header {
  @apply flex flex-row px-4 py-5;

  .thumbnail {
    height: 96px;
    width: 58px;
  }

  .details {
    @apply flex flex-col ml-5;

    .product-name {
      @apply text-regular font-bold;
    }

    .product-format {
      @apply mt-5 text-regular font-bold flex items-center;

      .format-icon {
        @apply mr-2;
      }
    }

    .product-ean {
      @apply text-regular font-bold;
    }

    .quantity {
      @apply text-regular font-bold;
    }
  }
}

.supplier-grid {
  @apply grid font-bold;
  grid-template-columns: repeat(7, 1fr);

  span:not(.first-cell) {
    @apply text-center;
  }

  span.number {
    @apply text-right;
  }

  span {
    @apply py-5 px-5 -ml-4;
    width: calc(100% + 2rem);
    border-bottom: 2px solid #e0ebf5;
  }

  ui-select-bullet,
  ui-checkbox {
    @apply flex justify-center;
  }
}

.reason {
  @apply flex flex-col justify-center items-center my-10 text-xl;

  .reason-dropdown {
    @apply flex flex-row items-center font-bold;

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

  ui-dropdown {
    min-width: 320px;
  }

  .error {
    @apply text-brand font-bold text-lg;
  }
}

.availability-error {
  @apply py-5 font-bold text-dark-goldenrod;
}

.load-spinner {
  @apply py-8;
}

.actions {
  @apply grid grid-flow-col gap-7 justify-center mt-8;

  .cta-reorder,
  .cta-not-available {
    @apply border-2 border-solid border-brand rounded-full py-3 px-6 font-bold text-lg outline-none self-end whitespace-nowrap;

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

  .cta-action-primary {
    @apply bg-brand text-white;
  }

  .cta-action-secondary {
    @apply bg-white text-brand;
  }
}
