@use "variables";

@use "sass:meta";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
@include meta.load-css("variables.scss");

:root {
  --konfuzio-green: #41af85;
  --white: #fff;
  --primary-color: var(--konfuzio-green);
  --primary-button: 4px;
  --top-bar-background: var(--white);
  --font-family: "Inter", sans-serif;
}

.dv-ui-app-container {
  display: flex;
  height: 100%;
  flex-direction: column;
  margin: 0;

  .overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    overflow-x: hidden;
  }
}

.dv-ui-theme {
  font-family: variables.$font-family;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;

  & {
    @include meta.load-css("../../../node_modules/buefy/dist/buefy.css");
  }

  h1 {
    font-size: 48px;
    color: variables.$text-color;
  }
  h2 {
    font-size: 24px;
    color: variables.$text-color;
  }

  a {
    color: variables.$primary;
  }

  .v-enter-active,
  .v-leave-active {
    transition: opacity 0.2s ease-in-out;
  }

  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }

  button {
    &.is-primary {
      background-color: variables.$primary !important;
      color: variables.$white !important;

      &:hover:enabled {
        filter: variables.$hover-style;
      }

      &:disabled {
        background-color: variables.$grey;
      }
    }

    &.finish-review-btn {
      margin-right: 2px;

      &:focus {
        box-shadow: none;
        outline: 3px solid variables.$grey-dark;
        border: 2px solid;
        margin-right: 1px;
      }

      .spinner {
        margin: auto !important;
      }
    }

    &.edit-mode-btn[disabled] {
      border: 1px solid variables.$detail;
    }

    &[disabled] {
      border: none;

      &:hover {
        text-decoration: none;
      }
    }

    &.primary-button {
      border-radius: var(--primary-button) !important;
    }

    &.tertiary-button {
      border-radius: 20px !important;
    }
  }

  .b-slider {
    &.is-full-height {
      height: 100%;

      .b-slider-track {
        height: 100%;

        .b-slider-thumb-wrapper {
          height: 100%;
          .tooltip-trigger {
            height: 100%;
            .b-slider-thumb {
              height: 100%;
              width: 1px;
            }
          }
        }
      }
    }
    &.show-hover {
      .b-slider-track:hover {
        .b-slider-thumb-wrapper {
          .tooltip-trigger {
            .b-slider-thumb {
              width: 4px;
              transform: none;
              background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
              opacity: 0.8;
            }
          }
        }
      }
    }
    &.show-line {
      .b-slider-track {
        .b-slider-thumb-wrapper {
          .tooltip-trigger {
            .b-slider-thumb {
              background-color: variables.$grey-lightest;
              background-image: none;
            }
          }
        }
      }
    }
    &.is-move {
      margin: 0px;
      &.is-disabled {
        .b-slider-track {
          cursor: not-allowed !important;
        }
        .b-slider-thumb-wrapper {
          cursor: not-allowed !important;
        }
      }
      .b-slider-track {
        cursor: col-resize;
        color: variables.$white;
        background: transparent !important;
      }
      .b-slider-fill {
        background: transparent !important;
      }
      .b-slider-thumb-wrapper {
        cursor: col-resize;
        .b-slider-thumb {
          background: none;
          background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");

          width: 5px;
          border: none;
        }
        .tooltip-content {
          user-select: none;
        }
      }
    }
  }

  .carousel-list {
    &.has-shadow {
      box-shadow: none !important;
    }

    .carousel-slides .carousel-slide {
      border: none !important;
    }

    .carousel-arrow {
      .icon {
        color: variables.$primary;

        &:hover {
          border: 1px solid variables.$primary;
        }

        svg {
          height: 100%;
        }
      }
    }
  }

  .error-message {
    position: absolute;
    width: 100%;

    .message {
      padding: 0;
    }

    .message-body {
      background-color: variables.$error-background;
      color: variables.$white;
      font-size: 14px;
      border: 0;
      border-radius: 0%;
      line-height: 20px;
      padding: 7px 0 7px 0;
    }

    .media-content {
      display: flex;
      justify-content: flex-end;
    }

    .message-container {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;

      .server-error {
        display: flex;

        .contact-support {
          text-decoration: underline;
          font-weight: 600;
          display: flex;
          align-items: center;
          padding-left: 5px;

          .icon {
            padding-left: 10px;
          }

          &:hover {
            cursor: pointer;
          }
        }
      }
    }

    .btn-container {
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }

  .message {
    &.label-message {
      .message-body {
        padding: 5px 15px 5px 15px !important;
      }
    }
  }

  .dropdown {
    &.no-padding-bottom {
      .dropdown-content {
        padding-bottom: 0;
      }
    }

    &.no-padding-top {
      .dropdown-content {
        padding-top: 0;
      }
    }

    + .dropdown {
      margin-left: 0;
    }

    &.dropdown-full-width {
      .dropdown-menu {
        width: 100%;
      }
    }

    .dropdown-trigger {
      justify-content: space-between;
      width: 100%;

      .icon {
        &.download-file,
        &.search-icon {
          svg {
            height: 100% !important;
            width: 100% !important;
          }
        }
      }
    }

    .dropdown-menu {
      padding-top: 0px;
      min-width: 40px;
      width: auto;
    }

    a.dropdown-item {
      padding-right: 16px;

      &.is-active {
        background-color: variables.$primary;
      }

      &.is-disabled {
        color: variables.$grey-blue !important;
      }
    }

    &.dropdown-menu-animation {
      a.navbar-item {
        color: variables.$text-color;
        font-size: 16px;
        line-height: 24px;

        &:hover {
          color: variables.$primary;
          background: none;
          border: none;
        }
      }

      &.label-dropdown {
        width: 100%;
      }
    }
  }
  .taginput-container {
    &.is-focused {
      box-shadow: none !important;
      border-color: variables.$primary !important;
    }

    .tag {
      border: none !important;
    }
  }
  .field {
    input {
      box-shadow: none !important;
      &:focus {
        border-color: variables.$primary;
      }
    }
    .control.has-icons-left {
      .icon {
        svg {
          height: 20px;
          width: 20px;
        }
      }
    }
  }

  .b-checkbox.checkbox {
    input[type="checkbox"] + .check {
      background-color: variables.$white;
    }
    &:hover input[type="checkbox"]:not(:disabled) + .check {
      border-color: variables.$primary !important;
    }

    input[type="checkbox"]:checked + .check {
      border-color: variables.$primary !important;
      background-color: variables.$primary;
    }
  }

  .modal {
    z-index: 999;

    &.model-overflow-visible {
      .modal-content {
        overflow: visible;
      }
      .modal-card-body {
        overflow: visible;
      }
    }

    &.modal-text-center {
      text-align: center;
    }

    &.modal-400 {
      position: absolute !important;

      .modal-content {
        max-width: 400px !important;

        .scroll-hidden {
          overflow: hidden;
          padding: 0;

          .content {
            overflow: auto;
            padding: 20px;
          }
        }
      }
    }

    &.is-active {
      &.modal-no-footer {
        .modal-content {
          .modal-card-body {
            border-radius: 16px 16px 16px 16px !important;

            &.split-modal {
              padding-bottom: 0;
            }
          }
        }
      }

      .modal-content {
        height: auto;
        margin-left: auto;
        margin-right: auto;
        position: relative;

        .modal-close {
          position: absolute;
          top: 14px;

          &::before,
          &::after {
            background-color: variables.$grey;
          }

          &:hover {
            background-color: variables.$white;
          }
        }

        .modal-card-body {
          background: variables.$white;
          border-radius: 16px 16px 0 0 !important;
        }

        .modal-card-foot {
          display: flex;
          justify-content: center;
          border: none;
          background: variables.$white;
          border-radius: 0 0 16px 16px;
        }
      }
    }

    &.modal-absolute {
      position: absolute;
    }

    .modal-background {
      background-color: variables.$full-black;
      opacity: 0.5;
    }

    // TODO: since edit modal is a specific one, should be on the component styles
    &.edit-modal {
      .modal-content {
        max-width: 440px !important;

        .header {
          display: flex;
          align-items: center;
          gap: 8px;
          padding-bottom: 15px;
          font-weight: 500;
          font-size: 18px;
        }

        .content {
          text-align: left;
          font-weight: 400;
          font-size: 14px;
          color: variables.$grey-blue;
        }

        .modal-card-foot {
          display: flex;
          gap: 5px;

          .recommended {
            font-weight: 600;
            font-size: 11px;
            background-color: rgba(255, 255, 255, 0.2);
            padding: 2px 5px;
            border-radius: 36px;
          }

          .button {
            width: 100%;

            &.is-primary {
              font-weight: 500;
            }
          }
        }
      }
    }
  }

  &.invisible-parent-modal {
    background-color: transparent;

    .modal-content {
      height: 100vh !important;
      top: 25%;

      .modal-card-body {
        overflow: visible;
      }
    }
  }

  .loading-background {
    background-color: transparent !important;
  }

  .loading-icon-size {
    width: 13px;
    height: 13px;
  }

  .notices {
    .snackbar {
      background-color: variables.$text-color;
      min-height: 40px;

      .text {
        display: flex;
        font-size: 14px;
      }
    }
  }

  .slide-fade-enter-active {
    transition: all 0.3s ease;
  }

  .slide-fade-leave-active {
    transition: all 0.3s ease;
  }

  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateY(-10px);
    opacity: 0;
  }

  .b-tooltip {
    height: 100%;
    align-items: center;

    .tooltip-content {
      background-color: variables.$text-color !important;

      a {
        color: variables.$white;
        text-decoration: underline;
        font-weight: 500;
      }
      &:before {
        border-bottom-color: variables.$text-color !important;
        border-top-color: variables.$text-color !important;
      }
    }

    &.left-aligned {
      .tooltip-content {
        left: -3px !important;
        transform: none !important;
        padding: 8px 10px !important;

        &::before {
          left: 16px !important;
          right: auto !important;
          border-top-color: variables.$text-color !important;
          border-bottom-color: variables.$text-color !important;
        }
      }
    }

    &.right-aligned {
      .tooltip-content {
        right: -20px !important;
        left: auto !important;
        transform: none !important;
        padding: 8px 10px !important;

        &::before {
          right: 16px !important;
          left: auto !important;
          border-bottom-color: variables.$text-color !important;
        }
      }

      &.no-right-margin {
        .tooltip-content {
          right: 0 !important;
        }
      }

      &.full-height-tooltip {
        height: 100%;

        .tooltip-content {
          right: 0 !important;
        }
      }
    }

    &.full-height-tooltip {
      .tooltip-trigger {
        height: 100%;
      }
    }

    &.width-184 {
      .tooltip-content {
        width: 184px !important;
      }
    }

    &.left-down-aligned {
      .tooltip-content {
        font-size: 14px;
        padding: 12px 12px;
        top: 45px;
        background-color: variables.$text-color;
        border-radius: 4px !important;

        &::before {
          top: 17px;
          border-left-color: variables.$text-color !important;
        }
      }
    }

    &.bottom-aligned {
      width: 100%;

      .tooltip-content {
        &::before {
          border-bottom-color: variables.$text-color !important;
        }
      }
    }

    &.top-aligned {
      .tooltip-content {
        &::before {
          border-top-color: variables.$text-color !important;
        }
      }
    }

    &.split-tooltip {
      width: 100%;
    }
  }

  .no-icon-margin .icon {
    margin: 0 !important;
  }

  .center-icon {
    vertical-align: middle;
  }

  .icon.is-48 {
    svg {
      height: 48px;
      width: 48px;
    }
  }

  .icon.is-24 {
    svg {
      height: 24px;
      width: 24px;
    }
  }
  .icon.is-20 {
    svg {
      height: 20px;
      width: 20px;
    }
  }

  .icon.is-12 {
    svg {
      height: 12px;
      width: 12px;
    }
  }
  .icon.is-16 {
    svg {
      height: 16px;
      width: 16px;
    }
  }

  .icon.is-small,
  .button .icon.is-small {
    width: 14px;
    height: 14px;

    svg {
      width: 14px;
      height: 14px;
    }

    &.caret {
      svg {
        height: 12px;
      }

      &.split-mode-caret {
        svg {
          color: variables.$grey;
        }
      }
    }

    &.close-btn {
      width: 10px;
      height: 10px;

      &.error-icon {
        color: variables.$white;
        padding-right: 20px;
        padding-left: 20px;

        svg {
          height: 15px !important;
        }
      }
    }
  }

  .dropdown {
    &.split-mode {
      .dropdown-trigger {
        font-size: 14px;
        height: 38px;
      }
    }

    &.width-12 {
      .dropdown-trigger {
        width: 12px;
      }
    }

    .dropdown-trigger {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &.is-disabled {
      cursor: not-allowed;
    }
  }

  .b-table {
    .table-wrapper {
      overflow: visible !important;
    }
    &.full-height {
      height: 100%;
      .table-wrapper {
        height: 100%;
        .table {
          height: 100%;
        }
      }
    }

    &.dark-header {
      .table {
        thead {
          background-color: variables.$black !important;
          th {
            font-weight: 400;
            background-color: variables.$black !important;
          }
        }
      }
    }

    &.header-32 {
      thead {
        height: 32px;
      }
    }

    .table,
    .table-wrapper {
      &.has-sticky-header {
        max-height: 200px;
        height: fit-content;
      }
      cursor: text;
      thead {
        background-color: variables.$purple !important;
        th {
          font-weight: 500;
          font-size: 10px;
          line-height: 18px;
          .th-wrap {
            text-transform: none;
            .icon {
              margin: 0;
            }
          }
          background-color: variables.$purple !important;
          color: white !important;
          vertical-align: middle;
          &[draggable="true"] {
            cursor: move;
          }
        }
      }
      tbody {
        background-color: rgba(123, 97, 255, 0.1);
        tr {
          background-color: white;
          color: black;
          td {
            font-weight: 500;
            font-size: 10px;
            line-height: 18px;

            &.has-text-centered {
              vertical-align: middle;
            }
          }
        }
      }
      &.is-striped {
        tbody {
          tr {
            &:not(.is-selected) {
              background-color: rgba(123, 97, 255, 0.1);
              &:nth-child(even) {
                background-color: rgba(123, 97, 255, 0.3);
              }
            }
          }
        }
      }
    }
  }

  .switch {
    input[type="checkbox"] {
      &:checked + .check {
        background: variables.$primary !important;
        box-shadow: none !important;
      }

      &:focus + .check {
        box-shadow: none !important;
      }
    }
  }

  .no-labels {
    a {
      color: (var(--primary-color));
      text-decoration: underline;
      font-weight: 500;

      &:hover {
        filter: brightness(0.8) contrast(160%) grayscale(0.4);
      }
    }
  }
  .splitpanes--vertical > .splitpanes__splitter {
    background: variables.$grey-lighter-low-opacity;
  }

  .splitpanes--horizontal > .splitpanes__splitter {
    background: variables.$grey-lighter-low-opacity;
  }
}