:host {
  @apply flex flex-col;
}

.product-card {
  @apply flex flex-col bg-white w-full rounded-card shadow-card;

  .product-details {
    @apply flex flex-row p-5;

    .bookmark {
      @apply absolute flex;
      top: 52px;
      right: 25px;
      z-index: 100;
    }

    .bookmark-badge {
      @apply p-0 m-0 outline-none border-none bg-transparent relative;
    }

    .promotion-badge {
      margin-top: -1px;
    }

    .bookmark-badge-gap {
      @apply mt-px-35;
    }

    .product-image {
      @apply flex flex-col items-center justify-start mr-5;

      .recessions {
        @apply flex flex-col items-center mt-4 bg-transparent border-none outline-none;

        .cta-recessions {
          @apply text-regular text-dark-cerulean font-bold mt-2;
        }
      }

      .image-button {
        @apply border-none outline-none bg-transparent relative;

        ui-icon {
          @apply absolute text-dark-cerulean inline-block;
          bottom: 1rem;
          right: 1rem;
        }
      }

      img {
        @apply rounded-xl shadow-card;
        box-shadow: 0 0 18px 0 #b8b3b7;
        max-height: 315px;
        max-width: 195px;
      }
    }

    .product-info {
      @apply w-full;

      .title {
        @apply text-3xl font-bold mb-6;
      }

      .format,
      .ssc,
      .quantity {
        @apply font-bold text-lg;
      }

      .stock {
        min-height: 44px;
      }

      .quantity {
        @apply flex justify-end mt-4;

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

      .format {
        @apply flex items-center;

        .format-icon {
          @apply flex mr-2;
          height: 18px;
        }
      }

      .ssc {
        @apply flex justify-end my-2;
      }

      .price {
        @apply font-bold text-xl;
      }

      .shelfinfo {
        @apply text-ucla-blue;
      }

      .fetching {
        @apply w-52 h-px-20;
        background-color: #e6eff9;
        animation: load 0.75s linear infinite;
      }

      .small {
        @apply w-16;
      }

      .medium {
        @apply w-40;
      }

      .availability-icons {
        @apply flex flex-row justify-end text-dark-cerulean mt-4;

        ui-icon {
          @apply mx-1;
        }

        .truck {
          @apply -mb-px-5 -mt-px-5;
        }

        .truck_b2b {
          @apply -mb-px-10 -mt-px-10;
        }

        .label {
          @apply font-bold;
        }

        .download-icon {
          @apply flex flex-row items-center;
        }
      }

      .cta-print {
        @apply bg-transparent text-brand font-bold text-xl outline-none border-none p-0;
      }
    }

    .row {
      @apply grid items-end;
      grid-template-columns: auto auto;
    }
  }

  .right {
    @apply text-right self-start;
  }

  hr {
    @apply bg-glitter h-1;
  }

  .product-description {
    @apply flex flex-col flex-grow px-5 py-5;
    min-height: calc(100vh - 769px);

    .info {
      @apply whitespace-pre-line;
    }

    .product-text {
      @apply flex flex-col whitespace-pre-line mb-px-100;

      h3 {
        @apply my-4;
      }

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

      .scroll-top-cta {
        @apply flex items-center justify-center self-end border-none outline-none bg-white relative rounded p-0 mt-8 mr-4;
        box-shadow: 0px 0px 20px 0px rgba(89, 100, 112, 0.5);
        transform: rotate(-90deg);
        border-radius: 100%;
        width: 58px;
        height: 58px;

        .arrow {
          color: #1f466c;
        }
      }
    }
  }

  .product-actions {
    @apply text-right px-5 py-4;

    .cta-availabilities {
      @apply text-brand border-none border-brand bg-white font-bold text-lg px-4 py-2 rounded-full;
    }
    .cta-continue {
      @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;
      }
    }
  }

  .product-formats {
    @apply grid whitespace-nowrap items-center px-5 py-4;
    grid-template-rows: auto;
    grid-template-columns: auto 1fr;
    max-width: 100%;

    .label {
      @apply mr-2;
    }

    .product-family {
      @apply mr-4 text-active-customer font-bold no-underline px-2;

      .format-detail {
        @apply flex items-center;

        img {
          @apply mr-2;
        }
      }

      .price {
        @apply ml-1;
      }
    }
  }
}

.product-recommendations {
  @apply sticky bottom-0 border-none outline-none left-0 right-0 flex items-center px-5 h-16 bg-white w-full;
  box-shadow: #dce2e9 0px -2px 18px 0px;

  .label {
    @apply uppercase text-active-customer font-bold text-small;
  }

  img {
    @apply absolute right-5 bottom-5 h-12;
  }
}

.recommendations-overlay {
  @apply absolute w-full top-0 rounded-t-card;
  top: 56px;
  max-width: 916px;

  .product-button {
    @apply flex flex-row justify-center items-center w-full text-xl bg-white text-ucla-blue font-bold border-none outline-none bg-transparent rounded-t-card;
    box-shadow: 0 -2px 24px 0 #dce2e9;
    height: 60px;
  }
}

.autor {
  @apply text-active-customer font-bold no-underline;
}
