@import "../variables";

// Import themes

@import "themes/parts/vibrant-borders";
@import "themes/parts/monospace-labels";

@import "themes/light";
@import "themes/lightdark";
@import "themes/dark";


// TODO: finish refactoring into `src/block-types/type-colors.js`
$any-color: #f5a;
$unit-color: #333;
$value-color: #8fa;
$tuple-color: #2aa;
$function-color: #fd3;
$object-color: #af8;
$optional-color: #384;
$collection-color: #1c5;
$future-color: #aa6;
$type-color: #2af;
$principal-color: #888;
$reference-color: #eee;
$effect-color: #ccc;
$member-color: #8af;
$parameter-color: #a8f;
$container-color: #fa8;

$bool-color: #d8f;
$float-color: #5df;
$int-color: #6fd;
$nat-color: #58f;

$any-gradient: conic-gradient(at center, orange, yellow, green, blue, indigo, violet, orange);
$any-gradient-right: conic-gradient(at right, orange, yellow, green, blue, indigo, violet, orange);

@mixin node-color($name, $color) {
  .node-editor {
    .node .socket.#{$name} .socket-color {
      background: $color !important;
    }

    .connection.socket-output-#{$name} .main-path {
      stroke: $color !important;
    }
  }
}

@include node-color("category-default", $any-color);
@include node-color("category-default", $any-gradient); // Prioritize gradient
@include node-color("category-values", $value-color);
@include node-color("category-tuples", $tuple-color);
@include node-color("category-functions", $function-color);
@include node-color("category-objects", $object-color);
@include node-color("category-optionals", $optional-color);
@include node-color("category-collections", $collection-color);
@include node-color("category-futures", $future-color);
@include node-color("category-principals", $principal-color);
@include node-color("category-references", $reference-color);
@include node-color("category-types", $type-color);
@include node-color("category-effects", $effect-color);
@include node-color("category-members", $member-color);
@include node-color("category-containers", $container-color);
@include node-color("category-parameters", $parameter-color);

@include node-color("category-integers", $int-color);
@include node-color("category-naturals", $nat-color);

@include node-color("type-Bool", $bool-color);
@include node-color("type-Float", $float-color);
@include node-color("type-Unit", $unit-color);

@keyframes socket-requested {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  to {
    transform: scale(1);
  }
}

$grid-color: #FFF2;
$grid-size: 32px;
$grid-area: $grid-size * 10000;


@media (max-width: 576px) {
  // Increase tappable region around sockets on mobile devices
  $socket-mobile-tap-margin: 1rem;

  .node-editor .socket {
    position: relative;
    width: 32px;
    height: 32px;
    transform: translateY(-4px);

    &::before {
      content: '';
      position: absolute;
      top: -$socket-mobile-tap-margin * .5;
      bottom: -$socket-mobile-tap-margin * .5;
      left: -$socket-mobile-tap-margin;
      right: -$socket-mobile-tap-margin;
    }
  }
}

.node-editor {
  background: #555;

  .dragging > & {
    background: #777 !important;
  }

  .grid {
    display: table;
    z-index: -100;
    position: absolute;
    top: -$grid-area;
    left: -$grid-area;
    width: 2 * $grid-area;
    height: 2 * $grid-area;
    background-size: $grid-size $grid-size;
    background-image: linear-gradient(to right, $grid-color 1px, transparent 1px), linear-gradient(to bottom, $grid-color 1px, transparent 1px);

    &.far {
      // Hotfix - flickering on Firefox / Safari
      background-image: linear-gradient(to right, #FFFFFF1A 1px, transparent 2px), linear-gradient(to bottom, #FFFFFF1A 1px, transparent 2px);
    }
  }

  .top-menu {
    input {
      background: none !important;
      border: 1px solid transparent !important;
      color: #022030AA;

      &:hover {
        border: 1px solid #02203055 !important;
      }
    }
  }

  .node {
    background: #111A;
    color: #FFF;
    border-color: #111;
    box-shadow: 0 4px 8px #000A;

    &:hover {
      background: #222A;
    }

    &.selected {
      z-index: 5 !important;
      background: #777E !important;
      border-color: #AAA !important;
    }

    &:not(.selected) .header {
      //border-radius: .5em .5em 0 0;
      border-radius: .5em;
      background: #333;
    }

    .prop {
      &.advanced, &.key-editor-advanced {
        opacity: .5;
      }
    }

    .socket {
      background: #222;
      //border-color: #222 !important;
      border-width: 0;
      transform: scale(.75);
      transition: transform .1s ease-out;

      .socket-color {
        transform: scale(.85) !important;
        border-radius: 50%;
      }

      &:hover {
        //background: #111;
        transform: scale(.85);
      }

      &.relevant {
        transform: scale(1.2) !important;
      }

      &.multiple {
        // Multiple-input sockets should have a different appearance
        //border-width: 3px;

        background: #111;
        transform: scale(.8);

        &:hover {
          transform: scale(.9);
        }

        .socket-color {
          transform: scale(.7) !important; // TODO: dry scale variable
        }
      }

      &.reversed .socket-color {
        transform: translateX(-1px) scale(.7) !important; // TODO: dry scale variable
      }

      &.reversed, &.reversed .socket-color {
        // Reversed sockets should look like right-facing triangles/carets
        border-radius: 0;
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 100%, 0 0);
      }

      &.requested {
        background: black;

        &:not(.relevant) {
          transform: scale(.9) !important;
        }

        .requested-wrapper {
          // Requested sockets should have a subtle animation
          animation: socket-requested 2.5s ease-in-out infinite;

          &:hover {
            animation-play-state: paused;
          }
        }
      }
    }

    .title {
      font-family: $font-family-sans-serif;
      font-size: 16px
    }

    .input-title, .output-title {
      font-family: $font-family-sans-serif;
      //font-family: $font-family-monospace;
      //font-size: 10px;
    }

    .control, .input-control {
      //font-size: 12px;
    }
  }

  .connection {
    position: static; // Fix disappearing on zoom for some Chrome users (#27)

    .main-path {
      stroke: #333;
      stroke-width: 3px;
    }
  }

  .node-shortcut-button {
    background: #222;

    &:hover {
      z-index: 10;
      transform: scale(1.1);
    }
  }

  .context-menu {
    font-size: 14px;
    display: inline-block;
    background: #111D;
    z-index: 200;

    &.mobile {
      font-size: 18px;
    }

    .context-menu-action {
      color: #FFF;
      cursor: pointer;
      padding: .25em;

      &:hover {
        background: #0005;
      }

      &.selected {
        background: #0003;
      }
    }

    .context-menu-search {
      width: 100%;
      color: #FFF;
      background: none;
    }

    .context-menu-search-area {
      min-width: 10rem;
      //max-height: 25rem;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .context-menu-icon {
      margin-right: .5em;
      vertical-align: text-bottom;
      opacity: .8;
    }
  }

  input, select {
    background-color: #111A;
    color: white;
    border: 1px solid #AAA;

    &.invalid {
      border-color: #F55 !important;
    }

    option {
      background-color: #222;
    }
  }
}

.output-panel {
  color: #EEE;
  background: #333;
}

.menu-button {
  .floating-menu & {
    background: #222A;

    &:hover {
      background: #222;
    }
  }

  &:hover {
    background: #FFF1;
  }
}

.modal-content {
  background: none !important;
}

.menu-modal {
  background: var(--bs-light);
}