/**
 * FF Typescript Foundation Library
 * Copyright 2019 Ralph Wiedemeier, Frame Factory GmbH
 *
 * License: MIT
 */

@use "sass:color";
@use "normalize";

////////////////////////////////////////////////////////////////////////////////
// FONTS

$font-ui: "Segoe UI", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !default;

@mixin font-ui-normal {
  font-family: $font-ui;
  font-weight: 400;
}

@mixin font-ui-bold {
  font-family: $font-ui;
  font-weight: 700;
}

////////////////////////////////////////////////////////////////////////////////
// COLORS

$color-background: #343434 !default;
$color-background-dark: color.adjust($color-background, $lightness: -5%) !default;
$color-background-darker: color.adjust($color-background, $lightness: -10%) !default;
$color-background-light: color.adjust($color-background, $lightness: 10%) !default;
$color-background-lighter: color.adjust($color-background, $lightness: 20%) !default;
$color-background-hover: $color-background-lighter !default;

$color-primary: #1f6699 !default; // blue
$color-primary-light: color.adjust($color-primary, $lightness: 8%) !default;
$color-primary-dark: color.adjust($color-primary, $lightness: -8%) !default;

$color-secondary: #E64A19 !default; // orange
$color-secondary-light: color.adjust($color-secondary, $lightness: 15%) !default;
$color-secondary-dark: color.adjust($color-secondary, $lightness: -15%) !default;

$color-text: #c8c8c8 !default;
$color-text-light: #e8e8e8 !default;
$color-text-dark: #a0a0a0 !default;
$color-text-disabled: #808080 !default;
$color-icon: #a0a0a0 !default;
$color-icon-disabled: #606060 !default;

$color-focus: $color-secondary-light;

$color-prompt: #e6cf5c !default;
$color-info: #73adff !default;
$color-success: #8ae65c !default;
$color-warning: #e6a345 !default;
$color-error: #e64545 !default;

////////////////////////////////////////////////////////////////////////////////
// TRANSITIONS

@mixin slide-out-right($duration, $curve) {
  transition: left $duration $curve;
  left: 100%;
}

////////////////////////////////////////////////////////////////////////////////
// MIXINS

// short hover animation
$tx-short: 0.15s;
// medium transition
$tx-medium: 0.3s;


@mixin fullsize {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
}


.ff-fullsize {
  @include fullsize;
}

.ff-container {
  @include fullsize;
  overflow: hidden;
}

@mixin fullscreen {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

@mixin noselect {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

@mixin triangle($color, $size, $angle) {
  &:before {
    content: '';
    position: absolute;
    top: 0.6em;
    left: 3px;
    width: 0;
    height: 0;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
    transform: rotate($angle);
    transition: transform 0.05s;
  }
}

@mixin triangle2($color, $size, $angle) {
    width: 0;
    height: 0;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
    transform: rotate($angle);
    transition: transform 0.05s;
}

@mixin dot($color, $size: 4px, $left: 5px, $top: 0.6em) {
  &:before {
    content: '';
    position: absolute;
    top: $top;
    left: $left;
    width: $size;
    height: $size;
    border: none;
    background: $color;
  }
}

@mixin window {
  box-sizing: border-box;
  background: $color-background;
  border: 1px solid $color-background-light;
  box-shadow: 3px 3px 24px rgba(0, 0, 0, 0.4);
}

@mixin hue-gradient($to) {
  background: linear-gradient(to $to, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

@mixin diagonal-stripes($color0, $color1) {
  background-image: repeating-linear-gradient(-45deg, $color0, $color0 8px, $color1 8px, $color1 16px);
}

@mixin ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

////////////////////////////////////////////////////////////////////////////////
// UTILITY CLASSES


// displays a little downward facing triangle
.ff-caret-down {
  @include triangle2($color-icon, 5px, 180deg);
}
.ff-caret-up {
  @include triangle2($color-icon, 5px, 0deg);
}
.ff-caret-right {
  @include triangle2($color-icon, 5px, 90deg);
}
.ff-caret-left {
  @include triangle2($color-icon, 5px, 270deg);
}

////////////////////////////////////////////////////////////////////////////////
// GLOBAL

html {
  color: $color-text;
}

button, input {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  background-color: inherit;
  color: inherit;
  font-size: inherit;
  cursor: inherit;
}

*:focus {
  outline: 1px solid $color-primary;
  outline-offset: 0;
}

*:focus:not(:focus-visible) {
  outline: 0;
}

*:focus-visible {
  outline: 1px solid $color-primary;
  outline-offset: 0;
}

////////////////////////////////////////////////////////////////////////////////
// SEMANTIC ELEMENTS

.ff-fullscreen {
  @include fullscreen;
}

.ff-noselect {
  @include noselect;
}

.ff-off {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.ff-on {
  user-select: auto;
  -webkit-user-select: none;
  pointer-events: auto;
}

.ff-focusable {
  tab-index: 0;
}

.ff-flex-row {
  display: flex;
}

.ff-flex-column {
  display: flex;
  flex-direction: column;
}
.ff-flex-wrap {
  flex-wrap: wrap;
}

.ff-flex-centered {
  align-items: center;
}

.ff-flex-item-fixed {
  flex: 0 0 auto;
  position: relative;
}
.ff-flex-item-stretch, .ff-flex-spacer {
  flex: 1 1 auto;
  position: relative;
}

.ff-scroll-y {
  @include fullsize;
  overflow-y: auto;
}

.ff-position-above {
  position: absolute;
  bottom: 0;
}

.ff-position-below {
  position: absolute;
  top: 100%;
}

.ff-position-left {
  position: absolute;
  right: 0;
}

.ff-position-right {
  position: absolute;
  left: 100%;
}

.ff-position-above, .ff-position-below {
  &.ff-align-left {
    left: 0;
  }
  &.ff-align-right {
    right: 0;
  }
}

.ff-position-left, .ff-position-right {
  &.ff-align-top {
    top: 0;
  }
  &.ff-align-bottom {
    bottom: 0;
  }
}

.ff-ellipsis {
  @include ellipsis;
}

.ff-placeholder {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ff-splitter-section {
  flex: 1 1 auto;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.ff-splitter[direction="vertical"] + .ff-splitter-section {
  border-top: 2px solid $color-background-darker;
}
.ff-splitter:not([direction="vertical"]) + .ff-splitter-section {
  border-left: 2px solid $color-background-darker;
}

////////////////////////////////////////////////////////////////////////////////
// CONTROLS

.ff-frame {
  padding: 4px;

  .ff-control {
    margin: 4px;
  }
}

.ff-icon {
  display: inline-block;
  position: relative;
  height: 1rem;
  fill: $color-icon;

  svg {
    width: inherit;
    height: inherit;
  }
}

.ff-button {
  cursor: pointer;

  &[vertical] {
    flex-direction: column;
  }
}

.ff-button.ff-inline {
  .ff-icon + .ff-text {
    padding-left: 0.5em;
  }
  .ff-icon {
    display: inline;
  }
  .ff-text {
    display: inline;
  }
}

.ff-button.ff-transparent {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 auto;
  flex-wrap: wrap;
  padding: 5px;
  background: transparent;
  fill: $color-icon;
  transition: fill 0.2s;

  &:hover, &:focus {
    fill: $color-text;
  }
  &[selected] {
    fill: $color-text;
  }

  & > .ff-text {
    margin: 3px;
    white-space: nowrap;
  }
  & > .ff-icon {
    margin: 3px;
    height: 1.3em;
  }
  & > .ff-caret-down {
    margin: 3px;
  }

  &.ff-disabled {
    color: $color-text-disabled;
    fill: $color-icon-disabled;
    user-select: none;
    pointer-events: none;
  }
}

.ff-button.ff-control {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  padding: 5px;
  background: $color-background-light;
  transition: background-color 0.2s;

  &:hover, &:focus {
    background-color: $color-background-lighter;
  }
  &[selected] {
    background-color: $color-primary;

    &:hover, &:focus {
      background-color: $color-primary-light;
    }
  }

  & > .ff-text {
    margin: 3px;
    white-space: nowrap;
  }
  & > .ff-icon {
    margin: 3px;
    height: 1.3em;
  }
  & > .ff-caret-down {
    margin: 3px;
  }

  &.ff-disabled {
    color: $color-text-disabled;
    fill: $color-icon-disabled;
    user-select: none;
    pointer-events: none;

    & > .ff-icon {
      fill: $color-icon-disabled;
    }
  }
}

.ff-menu {
  background-color: $color-background-light;
  z-index: 100;
  display: flex;
  flex-direction: column;

  .ff-divider {
    height: 1px;
    padding: 0;
    background: $color-icon;
  }

  .ff-button {
    justify-content: flex-start;
    margin: 0;
    padding: 4px 4px;

    .ff-icon {
      height: 1.2em;
      width: 2.2em;
      margin-right: 4px;
    }
  }
}

.ff-dropdown .ff-menu {
  min-width: 100%;
  margin-top: 3px;
}

////////////////////////////////////////////////////////////////////////////////
// COMPONENTS

.ff-modal-plane {
  @include fullscreen;
  background-color: color.adjust(black, $alpha: -0.4);
  opacity: 0;
  transition: opacity $tx-medium;
  z-index: 990;
  pointer-events: auto;

  &.ff-transition {
    opacity: 1;
  }
}

ff-dialog {
  @include window;
}

ff-title-bar {
  background: $color-background-darker;
  padding: 2px;

  .ff-text {
    flex: 1 1 auto;
    padding-right: 8px;
  }
  .ff-icon {
    padding: 2px;
  }
}

ff-popup-button {
  .ff-content {
    transition: opacity $tx-short;
  }
}

.ff-line-edit {
  display: block;
  overflow: hidden;
  background-color: $color-background-darker;
  min-height: 1.6em;

  input {
    padding: 2px;
  }
}

.ff-text-edit {
  box-sizing: border-box;
  flex: 1 1 auto;
  display: flex;
  background-color: $color-background-darker;

  textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 2px;
    resize: none;
    background: transparent;
    color: inherit;
    border: none;
  }
}

.ff-color-edit {
  font-size: 0.8rem;

  .ff-control {
    margin: 0;
  }

  .ff-slider-controls {
    align-items: stretch;
    flex: 1 1 auto;
  }

  .ff-numeric-controls {
    flex: 0 0 auto;
    align-items: center;
    margin-top: 6px;
  }
  .ff-text {
    color: $color-icon;
    margin: 0 3px;
  }
  .ff-line-edit {
    flex: 4 5 auto;
    &.ff-wide {
      flex: 5 4 auto;
    }
  }

  .ff-knob {
    margin: -2px 0 0 -2px;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  }

  .ff-vector-slider {
    flex: 1 0 auto;
    padding: 0 10px 10px 0;

    background-image:
      linear-gradient(to bottom, transparent, black),
      linear-gradient(to right, white, red);

    .ff-knob {
      width: 10px;
      height: 10px;
    }
  }

  .ff-linear-slider {
    flex: 0 0 24px;
    margin-left: 6px;
    padding-bottom: 10px;

    .ff-knob {
      width: 100%;
      height: 10px;
    }
  }

  .ff-hue-slider {
    @include hue-gradient(bottom);
  }
  .ff-alpha-slider {
    color: $color-background-light;
  }
}

.ff-quad-splitter {
  .ff-left {
    box-sizing: border-box;
    border-right: 1px solid $color-background;
  }
  .ff-top {
    box-sizing: border-box;
    border-bottom: 1px solid $color-background;
  }
}

.ff-color-button {

}

////////////////////////////////////////////////////////////////////////////////
// NOTIFICATIONS

#ff-notification-stack {
  position: fixed;
  z-index: 100;
  bottom: 0;
  right: 0;
  width: 30%;
  min-width: 250px;
  max-width: 500px;
}

.ff-notification {
  position: relative;
  left: 0;
  display: flex;
  margin: 8px;
  padding: 4px;
  background: $color-background-light;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);

  &.ff-info > .ff-icon { fill: $color-info; }
  &.ff-success > .ff-icon { fill: $color-success; }
  &.ff-warning > .ff-icon { fill: $color-warning; }
  &.ff-error > .ff-icon { fill: $color-error; }

  & > .ff-icon {
    height: 2em;
    padding: 8px;
  }

  &.ff-out {
    transition: left 0.5s ease-in;
    left: 100%;
  }

  .ff-text {
    flex: 1;
    padding: 8px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .ff-button {
    flex: 0;
    padding: 8px;
  }
}

////////////////////////////////////////////////////////////////////////////////
// MESSAGE BOX

.ff-message-box {
  position: relative;
  min-width: 350px;
  max-width: 450px;
  width: 90%;
  padding: 16px;
  background: $color-background;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity $tx-short;

  &.ff-transition {
    opacity: 1;
  }

  .ff-title {
    align-items: flex-start;

    .ff-type-icon {
      margin: 0 16px 0 0;
      height: 2.5em;
      &[name="prompt"] { fill: $color-prompt; }
      &[name="info"] { fill: $color-info; }
      &[name="warning"] { fill: $color-warning; }
      &[name="error"] { fill: $color-error; }
    }
    .ff-content {
      flex: 1 1 auto;
      margin: 0 0 2em 0;
    }
    .ff-caption {
      font-size: 1.5em;
    }
    .ff-text {
      margin: 2em 0 1em 0;
    }
    .ff-line-edit {
      margin: 0 0 1em 0;
      input { padding: 4px }
    }
    .ff-close-button  {
      margin: 0 0 0 16px;
      padding: 0;
    }
  }

  .ff-button + .ff-button {
    margin-left: 8px;
  }
}

////////////////////////////////////////////////////////////////////////////////
// MENU

.ff-popup-options {
  @include window;
  min-width: 6rem;

  button {
    padding: 4px 8px;
    text-align: start;
    user-select: none;
  }

  button + button {
    margin-top: 1px;
  }

  button:hover {
    background-color: $color-background-light;
  }
  button:focus {
    outline: none;
    background-color: $color-primary;
  }
}

////////////////////////////////////////////////////////////////////////////////
// LIST, TABLE, TREE

.ff-list {
  flex: 1 1 auto;
  background-color: $color-background-dark;

  .ff-list-item {
    cursor: pointer;
    user-select: none;
    padding: 2px;

    &:hover {
      background-color: $color-background;
    }
    &[selected] {
      background-color: $color-primary;
    }
  }

  .ff-list-item + .ff-list-item {
    border-top: 1px solid $color-background;
  }
}

.ff-table {
  position: relative;
  box-sizing: border-box;
  width: 100%;

  table {
    box-sizing: border-box;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
  }
  //tr:nth-child(2) {
  //  background-color: $color-background-darker;
  //}
  tr[selected] {
    background-color: $color-primary;
  }
  th, td {
    padding: 4px;
  }
  th {
    background-color: $color-background-darker;
    color: $color-text-dark;
    text-align: start;
  }
  .ff-table-sort-icon {
    height: 0.8em;
    margin-left: 4px;
    color: $color-icon;
  }
}

.ff-tree {
  position: relative;
  overflow-y: auto;

  .ff-tree-node-container {
    margin-left: -501px;
    border-top: 1px solid color.adjust($color-background, $lightness: 4%);
    border-bottom: 1px solid color.adjust($color-background, $lightness: 4%);
    margin-bottom: -1px;
  }

  .ff-tree-node {
    margin-left: 500px;

    &.ff-inner {
      background-color: color.adjust($color-background, $lightness: -2%);
    }
    &.ff-leaf {
      background-color: color.adjust($color-background, $lightness: 3%);
    }
    &.ff-root {
      background-color: $color-background-dark;
    }
    &[selected] {
      background-color: $color-primary;
    }

    .ff-header {
      position: relative;
      cursor: pointer;
      padding-left: 14px; // room for triangle

      .ff-text {
        user-select: none;
      }
    }

    &.ff-drop-target > .ff-header {
      outline: 1px dashed $color-primary;
    }
    &.ff-inner[expanded] > .ff-header {
      @include triangle($color-icon, 4px, 180deg);
    }
    &.ff-inner:not([expanded]) > .ff-header {
      @include triangle($color-icon, 4px, 90deg);
    }
    &.ff-leaf .ff-header {
      //@include dot($color-icon-disabled, 3px, 6px, 0.6em);
      cursor: default;
    }

    .ff-content {
      margin-left: 10px; // indent
    }
    &:not([expanded]) > .ff-content {
      display: none;
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
// TAB CONTAINER

ff-tab-container {
  background: $color-background;
}

ff-tab-header {

}

////////////////////////////////////////////////////////////////////////////////
// DOCK VIEW

$color-dock-frame: $color-background-darker;

ff-tab-container, ff-dock-stack {
  background: $color-background-dark;
  border: 1px solid $color-dock-frame;

  & header {
    background: $color-dock-frame;
  }
}

ff-tab-header, ff-dock-panel-header {
  background: $color-dock-frame;
  color: $color-text;
  padding: 1px 3px 2px 2px;

  &[active] {
    background: linear-gradient(color.adjust($color-background, $lightness: 18%), $color-background);
    color: $color-text;
  }

  label {
    pointer-events: none;
  }
  .ff-text {
    padding: 0 1px;
  }
  .ff-icon {
    top: 1px;
    height: 0.8rem;
    padding: 0 1px;
    //fill: $color-text-disabled;
  }
}

.ff-dock-drop-marker {
  box-sizing: border-box;
  background: color.adjust($color-primary, $alpha: -0.7);
  border: 1px solid $color-primary;
}