/* Theme */

$konfuzio-green: #41af85;
$green: #4bb543;
$green-low-opacity: rgba(75, 181, 67, 0.11);
$green-border: #67d19f;
$green-hover-background: rgba(18, 183, 106, 0.05);
$darker-green: #3a9c76;
$dark-green-hover: #0c4b33;
$primary-low-opacity: rgba(52, 171, 125, 0.16);

$red: #e7423a;
$low-opacity-red: rgba(231, 66, 58, 0.08);
$lightest-red: #fdf4f6;
$error-background: #d4453d;

$grey-dark: #344054;
$grey: #798190;
$grey-low-opacity: rgba(133, 140, 154, 0.4);
$grey-lighter-low-opacity: rgba(223, 224, 228, 0.5);
$grey-lightest: #f0f0f0;
$grey-outline: #d0d5dd;
$grey-detail: #dfe0e4;
$subtle-grey: #f2f4f7;
$subtlest-grey: #e3e4e5;
$grey-darker: #101828;
$grey-hover: #fafafa;
$grey-blue: #667085;
$detail: #e2e3e4;

$dark: #2f3032;
$full-black: #000;

$white: #fff;
$low-opacity-white: rgba(255, 255, 255, 0.1);

$yellow: #ffd600;
$warning-yellow: #fec84b;

$blue: #2f80ed;
$dark-blue: #2b3545;

:root {
  --font-family: #{"Inter", sans-serif};
  --background-color: #{$white};
  --primary-color: #{$konfuzio-green};
  --primary-hover: #{$dark-green-hover};
  --toolbar-color: #{$dark-blue};
  --toolbar-elements: #{$white};
  --tooltip-color: #{$dark};
  --error-background: #{$error-background};
  --error-text: #{$white};
}

$font-family: var(--font-family);
$background: var(--background-color);
$toolbar: var(--toolbar-color);
$primary: var(--primary-color);
$primary-dark: var(--primary-hover);
$tooltip: var(--tooltip-color);
$toolbar-elements: var(--toolbar-elements);

$link: $primary;
$info: $blue;
$danger: $red;
$warning: $warning-yellow;
$success: $green;
$text: $grey-dark;
$text-strong: $dark;
$text-lighter: $grey;
$black: $dark;

$input-shadow: none;
$top-bar-height: 56px;
$component-border: 1px solid $detail;

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

    &:hover:enabled {
      background-color: $primary-dark !important;
    }

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

  &.reject-decline-btn {
    font-size: 14px;
    color: $grey-blue !important;
    font-weight: 500;
    background-color: transparent;
    width: auto;

    &:not([disabled]) {
      &:hover {
        text-decoration: none;
        color: $dark-blue !important;
      }
    }

    &:focus {
      box-shadow: none;
    }
  }

  &:not(.is-text, .is-primary, .reject-btn) {
    background-color: $white;
    color: $dark-blue;
  }

  &.is-text {
    text-decoration: none;

    &:hover {
      background-color: transparent;
    }
  }

  &.annotation-cancel-btn {
    .icon {
      svg {
        width: 15px !important;
        height: 15px !important;
      }
    }
  }

  &.accept-all-btn {
    padding-left: 4px;
    padding-right: 4px;
  }

  &.reject-all-btn {
    padding-right: 4px;
  }

  &.action-bar-save-btn {
    border-radius: 20px;
    height: 32px;
    padding: 6px 12px 6px 12px !important;
    font-size: 14px;
    font-weight: 500;
  }

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

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

    .spinner {
      margin: auto !important;
    }
  }

  &.rotate-button[disabled] {
    border: 1px solid $detail;
  }

  &[disabled] {
    border: none;

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

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

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

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

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

      svg {
        height: 100%;
      }
    }
  }
}

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

  .message {
    padding: 0;
  }

  .message-body {
    background-color: var(--error-background);
    color: var(--error-text);
    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;
  }

  &.handover {
    position: relative;
    margin-right: 15px;
    margin-left: 15px;
    margin-top: 7px;
    width: auto;

    .message {
      display: flex;
    }

    .message-body {
      border-radius: 4px;
      border: 1px solid $red;
      background-color: $lightest-red !important;
      color: $red;
      width: 100%;
    }

    .media-content {
      margin: 0px 10px 0px 10px !important;
    }

    .message-container {
      justify-content: flex-start !important;
      text-align: left;
    }
  }
}

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

.dropdown {
  height: 100%;

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

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

  + .dropdown {
    margin-left: 0;
  }

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

  .dropdown-menu {
    padding-top: 0px;
  }

  a.dropdown-item.is-active {
    background-color: $primary;
  }

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

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

    &.label-dropdown {
      width: 100%;
    }
  }
}

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

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

.modal {
  z-index: 999;

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

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

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

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

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

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

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

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

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

  &.modal-absolute {
    position: absolute;
  }

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

.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: $dark-blue;
    min-height: 40px;

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

.label-action-btn {
  .dropdown-trigger {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

.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 {
  &.left-aligned {
    .tooltip-content {
      left: 10px !important;
      transform: none !important;
      padding: 8px 10px !important;

      &::before {
        left: 16px !important;
        right: auto !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;
      }
    }
  }

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

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

      &::before {
        top: 17px;
        border-left-color: $dark-blue !important;
      }
    }
  }
}

.rejected-tag-container {
  .tags {
    margin: 0 !important;

    .tag {
      margin-bottom: 0 !important;
      color: $dark;
      font-weight: 400;
      background-color: $detail;
      border-style: none !important;

      &:hover {
        background-color: $detail !important;
      }

      &.is-delete {
        cursor: pointer;

        &::before {
          height: 1.5px;
          border-radius: 4px;
        }

        &::after {
          width: 1.5px;
          border-radius: 4px;
        }
      }
    }

    &.loading-active {
      .is-delete {
        display: none !important;
      }

      .tag {
        border-radius: 4px;
      }
    }
  }
}

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

.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: $grey;
      }
    }
  }

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

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

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

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

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

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

.b-table {
  &.full-height {
    height: 100%;
    .table-wrapper {
      height: 100%;
      .table {
        height: 100%;
      }
    }
  }
  .table {
    cursor: text;
    thead {
      background-color: #7b61ff;
      font-weight: 500;
      font-size: 10px;
      line-height: 18px;
      th {
        .th-wrap {
          text-transform: none;
          .icon {
            margin: 0;
          }
        }
        background-color: #7b61ff;
        color: white;
        vertical-align: middle;
        &[draggable="true"] {
          cursor: move;
        }
      }
    }
    tbody {
      background-color: rgba(123, 97, 255, 0.1);
      font-weight: 500;
      font-size: 10px;
      line-height: 18px;
      tr {
        background-color: white;
        color: black;
        td {
          &.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);
            }
          }
        }
      }
    }
  }
}