.size-guide-modal {
  /* Note, centred-dialog.css handles the positioning and animation of the modal   */
  &[open] {
    max-height: calc(100vh - var(--fixed-space-8));
    width: min(408px, calc(100vw - var(--fixed-space-6)));

    @media (min-width: 750px) {
      width: min(701px, calc(100vw - var(--fixed-space-6)));
    }
  }

  .modal-content {
    overflow: auto;
  }

  .size-guide-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--fixed-space-3);

    @media (min-width: 750px) {
      display: none;
    }
  }

  /* Note, there is a lot of similarity in how these tables are styled to the brewing guide table. There's no dependency though. */
  .size-guide-table-wrapper {
    display: none;

    @media (min-width: 750px) {
      display: block;
    }
  }

  .size-guide-table {
    border-collapse: collapse;
    text-transform: uppercase;
    width: 100%;

    th,
    td {
      margin: 0;
      padding: 0;
      text-align: left;
      vertical-align: top;
    }

    /* Size column (first col / row headers) */
    thead th:first-child,
    tbody th {
      min-width: 120px;
    }

    thead th {
      color: var(--dark-800);
      padding-bottom: var(--fixed-space-4);
    }

    tbody tr + tr th,
    tbody tr + tr td {
      padding-top: var(--fixed-space-4);
    }

    tbody th,
    tbody td {
      border-top: 1px solid var(--dark-800);
      padding-block: var(--fixed-space-3) var(--fixed-space-4);
    }

    tbody th {
      color: var(--dark-800);
    }

    tbody td {
      color: var(--dark-800);
    }
  }

  .size-guide-item-summary,
  .size-guide-item-row :is(dt, dd) {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
  }

  .size-guide-item-row {
    border-top: 1px solid var(--dark-200);
    display: grid;
    gap: 0 24px;
    grid-template-columns: auto 1fr;

    > dt {
      color: var(--dark-800-o50);
      line-height: 1;
      width: 120px;
    }

    > dd {
      color: var(--dark-800);
      line-height: 1;
    }
  }

  .size-guide-item-summary {
    align-items: center;
    border-bottom: 1px solid var(--dark-800-o50);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding-bottom: var(--fixed-space-3);

    &::-webkit-details-marker {
      display: none;
    }
  }

  .size-guide-item-label {
    color: var(--dark-800-o50);
    flex: 1;
    line-height: 1;
  }

  .size-guide-item-chevron {
    color: var(--dark-800-o50);
    display: flex;
    height: 12px;
    transform: rotate(180deg);
    width: 12px;

    svg {
      height: 100%;
      width: 100%;
    }
  }

  details[open] > .size-guide-item-summary {
    border-bottom-color: var(--dark-800);
    color: var(--dark-800);

    .size-guide-item-label {
      color: var(--dark-800);
    }

    .size-guide-item-chevron {
      color: var(--dark-800);
      transform: rotate(0deg);
    }
  }

  .size-guide-item-content {
    padding: var(--fixed-space-3) 0 var(--fixed-space-4) 0;

    dl {
      display: flex;
      flex-direction: column;
      gap: var(--fixed-space-3);
    }
  }
}