phonograph/sass/main.scss

@use 'sass:color';

@use 'basic-dropdown';
@use 'globals';
@use 'modern-normalize';
@use 'forms';
@use 'collapsible_menu';
@use 'condition-editor';
@use 'tabler-icons' with (
  $ti-font-path: '../tabler-icons/webfont/fonts'
);
@use 'workspace-nav';

html {
  font-family: globals.$font-family-default;
}

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");
}

@view-transitions {
  navigation: auto;
}

// 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.reset-anchor;
    @include globals.button-primary;
  }

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

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

  &--small {
    @include globals.reset-anchor;
    @include globals.button-small;
  }
}

.padded {
  padding: 8px;

  &--lg {
    padding: 32px;
  }
}

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

  &__toolbar-utilities {
    align-items: center;
    display: flex;
    gap: 12px;
    grid-area: utilities;
    justify-content: flex-start;
    padding: 0 12px;
  }

  &__toolbar-user {
    align-items: center;
    display: flex;
    gap: 12px;
    grid-area: user;
    justify-content: flex-end;
    padding: 0 12px;
  }

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

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

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

.table {
  border-collapse: collapse;

  th, td {
    border: globals.$default-border;
    padding: 8px;
  }

  th {
    background: #eee;
  }

  &__message {
    opacity: 0.5;
    text-align: center;
  }
}

.phono-popover:popover-open {
  @include globals.popover;
}

.dialog:popover-open, .dialog:open {
  @include globals.rounded;

  background: #fff;
  border: globals.$popover-border;
  box-shadow: globals.$popover-shadow;
  display: block;
  max-height: 90vh;
  overflow: auto;
}