@use 'sass:color';

@use 'globals';
@use 'modern-normalize';

html {
  font-family: "Averia Serif Libre", "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

button, input[type="submit"] {
  font-family: inherit;
}

@font-face {
  font-family: "Averia Serif Libre";
  src: url("../averia_serif_libre/averia_serif_libre_regular.ttf");
}

@font-face {
  font-family: "Averia Serif Libre";
  src: url("../averia_serif_libre/averia_serif_libre_bold.ttf");
  font-weight: 700;
}

@font-face {
  font-family: "Averia Serif Libre";
  src: url("../averia_serif_libre/averia_serif_libre_light.ttf");
  font-weight: 300;
}

@font-face {
  font-family: "Funnel Sans";
  src: url("../funnel_sans/funnel_sans_variable.ttf");
}

// https://css-tricks.com/inclusively-hidden/
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

.page-grid {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template:
    'sidebar toolbar' 4rem
    'sidebar main' 1fr / max-content 1fr;

  &__toolbar {
    grid-area: toolbar;
    border-bottom: globals.$default-border;
  }

  &__sidebar {
    grid-area: sidebar;
    width: 15rem;
    max-height: 100vh;
    overflow: auto;
    border-right: globals.$default-border;
  }

  &__main {
    grid-area: main;
    overflow: hidden;
  }
}

.section {
  padding: 1rem 2rem;
}

.notice {
  @include globals.rounded;
  margin: 1rem 0rem;
  padding: 1rem;
  max-width: 40rem;

  &--info {
    border: solid 1px globals.$notice-color-info;
    background: color.scale(globals.$notice-color-info, $lightness: 90%, $space: hsl);
    color: color.scale(globals.$notice-color-info, $lightness: -80%, $space: hsl);
  }
}

.role-tree {
  font-family: globals.$font-family-data;

  &--no-inherit {
    opacity: 0.6;
    font-style: italic;
  }

  &__branches {
    border-left: solid 1px #000;
    list-style-type: none;
    margin: 0;
    margin-top: 0.25rem;
    padding: 0;
  }

  &__branch {
    padding-top: 0.25rem;
    padding-left: 1rem;
  }
}