@use '../../scss/base/variables' as var;

.container {
  border: 1px solid var(--medium-purple);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  @media only screen and (min-width: var.$breakpoint-md) {
    /**
     * The height is set to 100vh - header height (72px) - page padding.
     * The footer height (40px) is only included in the calculation if there is a PageFooter component used on the page.
     */
    height: calc(100vh - 72px - 40px);
    &.hasPageFooter {
      height: calc(
        100vh - var(--app-header-height, 72px) - var(
            --app-footer-height,
            70px
          ) -
          40px
      );
    }
    max-width: 300px;
  }
}

.header {
  min-height: 32px;
  padding: 16px;
  background: var(--faint-gray);
  border-bottom: 1px solid var(--medium-purple);
  border-radius: 4px 4px 0 0;
  position: sticky;
  top: 0;
  z-index: 10; // Needed to make sure that the header remains above the ScrollingContainer gradient
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.topSection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.imageAndNameContainer {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  .productName {
    text-align: center;
  }
}

.productName {
  font-size: var(--font-size-14);
}

.link {
  color: var(--blue);
  transition: 0.25s ease-in-out color;
  &:hover {
    color: var(--dark-blue);
  }
}

.section {
  padding: 16px;
  display: grid;
  justify-content: center;
  gap: 16px;
  &.twoColumns {
    grid-template-columns: repeat(2, 1fr);
  }
  .labelAndData {
    text-align: center;
  }
  .oddNumber {
    grid-column: 1 / 3;
  }
}

.divider {
  height: 1px;
  width: 100%;
  background: var(--medium-purple);
}

.iconColor svg path {
  fill: var(--purple);
}

.simpleContainer {
  display: flex;
  gap: 16px;
  .productInfo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    .identifier {
      font-size: var(--font-size-14);
      font-weight: var(--font-weight-bold);
      line-height: 20px;
      color: var(--dark-purple);
    }
  }
}

.simpleOuterContainer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}