:root {
  --symbols-font: var(--fa-font-solid);
  --symbol-shopping-cart: "\f290"; /* This is a shopping _bag_ actually, but the var means: the symbol we use FOR shopping cart */
  --symbol-trash: "\f1f8";
  --symbol-checkmark: "\f00c";
  --symbol-crossed: "\f00d";
}

.ShoppingCartPopup {
  /* When the layout is ready, set this variable on the menu bar, and change all the other icons
   * to use it */
  --menubar-icon-size: 2rem;
  --menubar-icon-size-font: calc(var(--menubar-icon-size) * 0.75);

  .counter {
    color: var(--client-instance-first-font-accent-color, var(--MICE-neutral-white, white));

    &::before { display: inline; font: var(--symbols-font); font-size: var(--menubar-icon-size-font); line-height: var(--menubar-icon-size); vertical-align: middle;}
    &::before { content: var(--symbol-shopping-cart) / ""; }

    > span {
      background: var(--client-instance-first-font-accent-color, var(--MICE-neutral-white, white));
      color: var(--client-instance-first-accent-color, black);

      display: inline-block;
      height: var(--menubar-icon-size);
      width: var(--menubar-icon-size);
      line-height: var(--menubar-icon-size);
      font-size: var(--menubar-icon-size-font);
      border-radius: 50%;
      text-align: center;
      vertical-align: middle;
    }
  }

  position: relative;

  &:not(:hover):not(:focus-within) .ShoppingCart {
    display: none;
  }
  & .ShoppingCart {
    display: flex;
    flex-direction: column;

    position: absolute;
    right: 0;
    top: calc(var(--menubar-icon-size) * 0.9);
    @media only screen and (width < 40em) { position: fixed; }

    background: var(--MICE-neutral-white);
    padding: 1em;
    border: 1px solid black; /* There is some shadow. TODO. */
    border-radius: 1em;

    min-width: 16em;
    width: max-content;
    max-width: min(30em, 90vw);

    max-height: calc(90vh - var(--menubar-icon-size));
    > ul {
      height: fit-content;
      overflow: hidden auto;
    }
  }
}

.ShoppingCart {
  &.loading {
    background: silver; opacity: 0.5; /* TODO: design something nicer */
  }

  > h3 {
    border-bottom: 1px solid silver;
    font-size: 120%;
    text-align: center;
  }
  > menu {
    border-top: 1px solid silver;
    box-shadow: 0 -1ex 1ex var(--MICE-neutral-white);
    > li { display: inline; }
  }
  > ul {
    max-width: 50em;
    margin: auto;

    &:not(:has(li)) { /* `:empty` still does not ignore spaces */
      margin: 2em 1em !important; /* FIXME!!!! REMOVE THE `!important` FROM THE GENERAL STYLE !!!!!!! */

      &::before {
        content: attr(data-emptiness-note);
      }
    }

    > li {
      display: grid;
      gap: 1ex;
      grid-template-columns: minmax(7em, auto) 1fr minmax(3em, auto);
      grid-template-areas:
        "img c1 btn"
        "img c2 btn"
        "img c3 btn";
      margin: 1em 0;
      padding: 1em 1ex 1em 0;
      & + li {
        border-top: 1px solid silver; /* TODO: find a named colour variable */
      }

      img.thumbnail {
        grid-area: img;
        display: inline-block;
        height: 6em;
        width: 6em;
        object-fit: cover;
        margin: 0 1em 0 0;
        cursor: pointer;
      }
      .name {
        grid-area: c1;
      }
      .address {
        /* reset the [beep] from stylator: */
        float: none; font: inherit; margin: unset;
        /* define my own [beep]: */
        grid-area: c2;
      }
      .tags {
        grid-area: c3;
        font-size: smaller;

        > span {
          display: inline-block;
          padding: 0 1ex; margin: 0.4ch 0.2ch 0 0; border-radius: 0.5ex;
          background: var(--client-theme-background-color, var(--MICE-dark-grey-blue-verylight));

          &.deliverableType { }
          &.hasContract { font-weight: bold; /* and/or different colour */ }
        }
      }
      button {
        grid-area: btn;
      }
    }
  }
}

/*
 * This may be used outside of the shopping cart.
 *
 * The structure:
 *
 *    <button class="iconButton [remove|add|whatever]">
 *      <span>...label...</span>
 *    </button>
 * */
button.iconButton {
  height: 4em;
  width: 4em;
  cursor: pointer;
  display: grid;
  justify-content: center;
  background: inherit;
  border: 1px solid transparent; border-radius: 1em; /* for shadow */
  &:hover {
    opacity: 0.65; /* I don't like it - the contrast is lousy :-( */
  }
  &:focus-visible {
    /* TODO: let the layout define the color variables */
    /* there is already a rule somewehere defining this stuff with !important */
    /* box-shadow: 0 0 2px 0.3em rgba(44, 63, 201, 0.5), inset 0 0 1px 0.1em white; */

    text-decoration: none !important; /* FIXME: someone has set the !important for all! That's not good. */
  }
  span {
    white-space: nowrap;
    border-radius: 1ex;
    padding: 0 1ch;
    background: var(--MICE-neutral-white); /* TODO: add variables specifically for the background */
    clip-path: inset(50%);
  }
  &:hover span {
    clip-path: none;
  }
  &:focus-visible span {
    clip-path: none;
    border: 1px solid var(--MICE-dark-grey-text-color);
  }
  &::before { display: block; font: var(--symbols-font); font-size: 150%; }
  &.remove::before { content: var(--symbol-trash) / ""; }
}

/*
 * This may be used outside of the shopping cart.
 *
 * The structure:
 *
 *    <a class="ctaButton [secondary]?">...</a>
 *    <button class="ctaButton ... >...</button>
 * */
@keyframes raiseY { from { transform: translateY(0); } to { transform: translateY(var(--raiseY, 0)); } }
.ctaButton {
  display: inline-block;
  padding: 1ex 3ex;
  margin: 1ex;

  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 1.5;

  button& { border: none; cursor: pointer; }

  &:hover {
    --raiseY: -3px; animation: .1s forwards raiseY;
    box-shadow: 0 2px 5px 0 var(--MICE-shadow-grey-blue-verylight-rgba);
  }
  &:active {
    --raiseY: -1px; animation: .1s forwards raiseY;
    box-shadow: 0 1px 2px 0 var(--MICE-shadow-grey-blue-verylight-rgba);
  }

  color: var(--client-instance-first-font-accent-color);
  background: var(--client-instance-first-accent-color);

  &.secondary {
    color: var(--client-instance-second-font-accent-color, white);   /* TODO: compare all these pairs of the CI colors for sufficient contrast */
    background: var(--client-instance-second-accent-color, #626262); /* TODO2: document the use cases for each variable */
  }
}