@import "common.css";

.layout-demo {
  position: relative;
  overflow: auto;
  resize: horizontal;
  border: var(--outline);
  padding: var(--space-4-5);
}

.layout-demo li {
  color: var(--color-on-primary-container);
  background: var(--color-primary-container);
  border: var(--outline-variant);
  border-color: var(--color-primary-outline);
  border-radius: var(--border-radius-2);
  padding-block: var(--space-3-4);
  padding-inline: var(--space-5-6);
  text-align: center;
  font-weight: var(--font-weight-body-emphasis);
  max-inline-size: 100%;
}

.center-demo ul {
  block-size: 10rem;
}

.center-demo li {
  inline-size: var(--container-5);
}

.wrapper-demo ul {
  max-inline-size: var(--container-7);
}

@media (width > 56rem) {
  .layout-demo {
    padding-block-end: var(--space-6);
  }

  .layout-demo::after {
    position: absolute;
    content: "Resize me";
    bottom: 0.3rem;
    right: 1rem;
    padding: var(--space-1);
    background-color: var(--color-surface-mid);
    border-radius: var(--border-radius-1);
    font-size: var(--step-1);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
  }
}

/* Responsive Tables – https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html */
/* Using aria-label instead of aria-labelledby because I'm not using a <caption> */
[role="region"][aria-label][tabindex] {
  overflow: auto;
}

/* Make the text easier to read in scrolling tables */
[role="region"][aria-label][tabindex] td {
  text-wrap: nowrap;
}

/* TODO: Need to refactor sidebar layout, styling and functionality – extract into component? */
[data-sidebar="true"] {
  --wrapper-max-inline-size: 100%;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: var(--color-surface-lowest);
  block-size: var(--top-nav-height);
  padding-block: 0;
  border-block-end: var(--outline-variant);
}

[data-sidebar="true"],
[data-sidebar="true"] ~ * {
  --top-nav-height: 3.75rem;
}

[data-sidebar="true"] ~ * {
  /* Can't be margin or causes issue with 100vh on body element in global styles */
  padding-block-start: var(--top-nav-height);
}

/* TODO: update for mobile, add logo at top, and add active styling */
.sidebar {
  position: fixed;
  top: var(--top-nav-height);
  background: var(--color-surface-lowest);
  z-index: 2;
  block-size: 100%;
  inline-size: var(--container-1);
  padding-inline: var(--space-3-4);
  border-inline-end: var(--outline-variant);
  overflow-y: auto;
}

.sidebar + * {
  padding-inline-start: var(--container-1);
}

.sidebar ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar a {
  display: block;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  border-radius: var(--border-radius-2);
  padding: var(--space-2);
}

.sidebar a:hover {
  color: var(--color-on-primary-container);
  background: var(--color-primary-container);
}

.sidebar .active {
  color: var(--color-on-surface);
  background: var(--color-surface-mid);
}

#sidebar-icon {
  display: none;
}

@media (width <= 75rem) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  [data-sidebar="open"] .sidebar {
    transform: translateX(0);
  }

  .sidebar + * {
    padding-inline-start: 0;
  }

  #sidebar-icon {
    display: block;
  }

  #sidebar-mask {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-surface-lowest);
    opacity: 60%;
    transition: opacity 0.2s;
    display: none;
  }

  [data-sidebar="open"] #sidebar-mask {
    display: block;
  }
}