phonograph/sass/main.scss

@use 'sass:color';

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

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

button, input[type="submit"] {
  @include globals.reset-button;
}

@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;
}

.button {
  &--primary {
    @include globals.button-primary;
  }

  &--secondary {
    @include globals.button-secondary;
  }

  &--clear {
    @include globals.button-clear;
  }
}

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

  &__toolbar {
    align-items: center;
    border-bottom: globals.$default-border;
    display: grid;
    grid-area: toolbar;
    grid-template:
      'utilities user' 1fr / 1fr max-content;
  }

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

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

.toolbar__utilities {
  align-items: center;
  display: flex;
  justify-content: flex-start;
}

.toolbar-item {
  flex: 0;
}

.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;
  }
}

.button-menu {
  &__toggle-button {
    @include globals.button-outline;
    align-items: center;
    display: flex;

    &-icon {
      display: flex;

      svg path {
        stroke: currentColor;
      }
    }
  }

  &__popover {
    &:popover-open {
      @include globals.popover;
      width: 16rem;
      // FIXME: This makes button border radius work correctly, but also hides
      // the outline that appears when each button is focused, particularly
      // when there is only one button present.
      overflow: hidden;
    }
  }

  // Palindrome humor! Anyone? No? Okay nvm.
  &__unem-nottub {
    @include globals.button-clear;
    border-radius: 0;
    padding: 1rem;
    text-align: left;
  }
}

.combobox {
  &__popover:popover-open {
    @include globals.popover;
    padding: 0;
  }

  &__completion {
    @include globals.reset-button;
    display: block;
    padding: 0.5rem;
    font-weight: normal;
    text-align: left;
    width: 100%;

    &:hover, &:focus {
      background: #0000001f;
    }
  }
}