@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;800;900&display=swap');
@import url('elements.css');

:root {
  font-family: 'Inter', sans-serif;

  --color-bg: #efefef;
  --color-text: black;
  --color-link: #8dbbef;
  --color-link-underline: rgba(255, 255, 255, .3);
  --color-link-underline-hover: rgba(255, 255, 255, .4);
  --color-bg-quote: #171717;

  user-select: none;
}

body {
  background-color: var(--color-bg);
  color: #0f0f0f;
  margin: 0;
}

/* Elements */
a {
    color: var(--color-link);
    text-decoration: none solid var(--color-link-underline);
}
a:is(:hover, :focus) {
    text-decoration: underline solid var(--color-link-underline);
    text-underline-offset: 2px;
}

.secondary {
    font-size: .9rem;
    font-weight: bold;
    color: rgb(119, 119, 119);
    display: block;
    margin-top: -.3rem;
    margin-bottom: .5rem;
}

/* Aside */
aside {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    scrollbar-gutter: stable;

    display: flex;
    flex-direction: column;
    gap: .5rem;

    padding: 1rem 0 1rem 1rem;

    z-index: 1000;
}
aside section {
    background-color: white;
    border: 1px solid lightgray;
    border-radius: .4rem;

    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .8rem 0;

    font-size: .95rem;

    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, .01);

    user-select: text;
}
aside section > * {
    margin: 0 1rem;
    padding: 0;
}
aside h3 {
    font-weight: 900;
}

/* Canvas */
canvas, #container {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
}

#floorsList, #roomsList {
    display: flex;
    gap: .35rem;
}
#floorsList {
    flex-wrap: wrap;
}
#roomsList {
    flex-direction: column;
}
:is(#floorsList, #roomsList) > a {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    background-color: #efefef;
    border-radius: .2rem;
    padding: .5rem 0;
    color: var(--color-text);
    text-decoration: none;
}
:is(#floorsList, #roomsList) > a > * {
    margin: 0 .75rem;
}

details summary {
    list-style-type: none;
    cursor: pointer;
}
details summary:before {
    display: 
}
details summary :is(h1, h2, h3, h4, h5, h6) {
    display: inline-block;
    margin: 0 0 .5rem 0;
}

details summary::before {
    color: gray;
    display: inline;
    content: "›";
    padding-right: .5rem;
    font-weight: bold;
    font-size: 1.2rem;
}
details[open] summary::before {
    content: "‹";
}

summary h4 {
    font-size: 1rem;
}


#floorNumber a {
    display: block;
    color: var(--color-text);
    text-decoration: none;
}