phonograph/sass/viewer.scss

@use 'globals';
@use 'sass:color';
@use 'condition-editor';
@use 'field-adder';

$table-border-color: #ccc;

.lens-grid {
  display: grid;
  grid-template:
    'table' 1fr
    'editor' max-content;
  height: 100%;
  width: 100%;
}

.lens-table {
  display: grid;
  grid-area: table;
  grid-template:
    'headers' max-content
    'main' 1fr
    'inserter' max-content;
  height: 100%;
  outline: none;
  overflow: auto;
  width: 100%;

  &__headers {
    display: flex;
    grid-area: headers;
    align-items: stretch;
  }

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

  &__row {
    align-items: stretch;
    display: flex;
    height: 2.25rem;
  }
}

.lens-cell {
  align-items: stretch;
  border: solid 1px $table-border-color;
  border-left: none;
  border-top: none;
  display: flex;
  flex: none;
  padding: 0;

  &:focus {
    outline: none;
  }

  &--insertable {
    border-style: dashed;
  }

  &__container {
    align-items: center;
    display: flex;
    flex: none;
    user-select: none;
    width: 100%;

    &--selected {
      background: #07f3;
    }

    &--cursor {
      background: transparent;
      outline: 3px solid #37f;
      outline-offset: -2px;
    }
  }

  &__content {
    flex: 1;
    font-family: globals.$font-family-data;

    &--dropdown {
      overflow: hidden;
      padding: 0 8px;
    }

    &--text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 8px;
    }

    &--uuid {
      font-family: globals.$font-family-mono;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 0.5rem;
    }

    &--null {
      align-items: center;
      color: color.scale(#000, $lightness: 65%, $space: hsl);
      display: flex;
      font-family: globals.$font-family-data;
      font-style: oblique;
      justify-content: center;
      padding: 0 0.25rem;

      svg path {
        fill: currentColor;
      }
    }
  }

  &__notice {
    align-items: center;
    color: color.scale(#000, $lightness: 50%, $space: hsl);
    display: flex;
    padding: 0 0.25rem;

    svg path {
      fill: currentColor;
    }
  }
}

.field-header {
  &__container {
    align-items: center;
    background: #0001;
    border: solid 1px #ccc;
    border-top: none;
    border-left: none;
    display: flex;
    flex: none;
    font-family: globals.$font-family-data;
    justify-content: space-between;
    padding: 0.25rem;
    text-align: left;
  }

  &__label {
    padding: 0.25rem;
  }

  &__type-indicator {
    @include globals.button-clear;
    align-items: center;
    display: flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;

    svg path {
      fill: currentColor;
    }
  }

  &__popover {
    &:popover-open {
      @include globals.popover;
      left: anchor(left);
      top: anchor(bottom);
      padding: 1rem;
      position: absolute;
    }
  }
}

.lens-inserter {
  grid-area: inserter;
  margin-bottom: 2rem;

  &__help {
    font-size: 1rem;
    font-weight: lighter;
    margin: 8px;
    opacity: 0.5;
  }

  &__main {
    align-items: stretch;
    display: flex;
    justify-items: flex-start;
  }

  &__rows {
    .lens-cell {
      border: dashed 1px $table-border-color;
      border-left: none;

      &:last-child {
        border-right: none;
      }
    }

    .lens-table__row:first-child .lens-table__cell {
      border-top: dashed 1px $table-border-color;
    }
  }

  &__submit {
    @include globals.reset-button;
    align-items: center;
    border: dashed 1px globals.$button-primary-background;
    border-bottom-right-radius: globals.$border-radius-rounded-sm;
    border-top-right-radius: globals.$border-radius-rounded-sm;
    color: globals.$button-primary-background;
    display: flex;
    justify-content: center;
    padding: 0 1rem;

    svg path {
      fill: currentColor;
    }
  }
}

.table-viewer__datum-editor {
  border-top: globals.$default-border;
  display: flex;
  grid-area: editor;
  height: 6rem;
}

.dropdown-option-badge {
  background: #ccc;
  border-radius: 999px;
  display: block;
  width: max-content;

  &:not(:has(button)) {
    padding: 6px 12px;
  }

  &--red {
    background: #f99;
    color: color.scale(#f99, $lightness: -66%, $space: oklch);
  }

  &--orange {
    background: color.adjust(#f99, $hue: 50deg, $space: oklch);
    color: color.scale(color.adjust(#f99, $hue: 50deg, $space: oklch), $lightness: -66%, $space: oklch);
  }

  &--yellow {
    background: color.adjust(#f99, $hue: 100deg, $space: oklch);
    color: color.scale(color.adjust(#f99, $hue: 100deg, $space: oklch), $lightness: -66%, $space: oklch);
  }

  &--green {
    background: color.adjust(#f99, $hue: 150deg, $space: oklch);
    color: color.scale(color.adjust(#f99, $hue: 150deg, $space: oklch), $lightness: -66%, $space: oklch);
  }

  &--blue {
    background: color.adjust(#f99, $hue: 200deg, $space: oklch);
    color: color.scale(color.adjust(#f99, $hue: 200deg, $space: oklch), $lightness: -66%, $space: oklch);
  }

  &--indigo {
    background: color.adjust(#f99, $hue: 250deg, $space: oklch);
    color: color.scale(color.adjust(#f99, $hue: 250deg, $space: oklch), $lightness: -66%, $space: oklch);
  }

  &--violet {
    background: color.adjust(#f99, $hue: 300deg, $space: oklch);
    color: color.scale(color.adjust(#f99, $hue: 300deg, $space: oklch), $lightness: -66%, $space: oklch);
  }

  button {
    @include globals.button-clear;

    color: inherit;
    padding: 6px 12px;
  }
}

.datum-editor {
  &__container {
    border-left: solid 4px transparent;
    display: grid;
    flex: 1;
    grid-template: 'type-selector type-selector' max-content
      'null-control value-control' max-content
      'helpers helpers' auto / max-content auto;

    &:has(:focus) {
      border-left-color: #07f;
    }
  
    &--incomplete {
      border-left-color: #f33;
    }
  }

  &__type-selector {
    grid-area: type-selector;
  }

  &__null-control {
    @include globals.reset_button;
    align-self: start;
    grid-area: null-control;
    padding: 0.75rem;

    &--disabled {
      opacity: 0.75;
    }
  }

  &__text-input {
    @include globals.reset_input;
    grid-area: value-control;
    font-family: globals.$font-family-data;
    padding: 0.75rem 0.5rem;
  }

  &__helpers {
    grid-area: helpers;
    overflow: auto;
  }

  &__dropdown-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    margin: 0;
    padding: 0 8px;
  }
}

.toolbar-popover {
  &:popover-open {
    @include globals.rounded;
    inset: unset;
    border: globals.$popover-border;
    margin: 0;
    margin-top: 0.25rem;
    position: fixed;
    display: block;
    width: 24rem;
    padding: 0.5rem;
    background: #fff;
    box-shadow: globals.$popover-shadow;
  }
}