// Fonts
$body-font-family: "Source Sans Pro", sans-serif;
$heading-font-family: "Source Sans Pro";
$font-size-root: 18px;

//Text editor
.v-application .ql-tooltip a,
.v-application .ql-editor a {
  color: var(--v-txt-base) !important;
  text-decoration: none !important;
}

.v-card__text a {
  color: var(--v-secAccent-base) !important;
}

//Tooltip
.v-tooltip__content {
  max-width: 220px !important;
  font-size: 14px !important;
  padding: 15px !important;
  -webkit-box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.11) !important;
  -moz-box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.11) !important;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.11) !important;
}

// Learning product
.v-card__title,
.v-card__title i {
  color: var(--v-txt-base);
  font-weight: 800 !important;
}

.v-divider {
  border-color: var(--v-lines-base) !important;
}

tbody tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
  background: var(--v-primary-base) !important;
  -webkit-box-shadow: 5px 5px 12px 4px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 5px 5px 12px 4px rgba(0, 0, 0, 0.08);
  box-shadow: 5px 5px 12px 4px rgba(0, 0, 0, 0.08);
}

.v-data-table__wrapper {
  overflow-x: visible;
  overflow-y: visible;
}

.v-select .v-select__selection--comma,
.v-chip__content,
.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled),
.v-select.v-select--chips:not(.v-text-field--single-line).v-text-field--enclosed .v-select__selections,
.v-list-item .v-list-item__title,
.v-list-item .v-list-item__subtitle,
.v-input--is-disabled input,
.v-input--is-disable,
p,
li {
  color: var(--v-txt-base) !important;
}

// Organize
.v-input--is-disabled .v-input__append-inner,
.v-list--disabled .v-input__slot i {
  opacity: 0.5;
}

// Time picker
.v-time-picker-title {
  color: var(--v-txt-base) !important;
}

// Data table
$data-table-regular-row-height: 96px;

.v-data-table-header tr th {
  border-bottom: 0px !important;
  border-top: 1px solid var(--v-lines-base) !important;
}

.v-data-table {
  table {
    border-spacing: 0px 16px !important;

    > .v-data-table-header tr {
      background-color: var(--v-secondary-base);
    }

    > tbody tr {
      background-color: var(--v-primary-base);

      > td &:first-child {
        padding-right: 0px !important;
      }
    }
  }

  .v-data-footer {
    border-top: none !important;
  }
}

.v-btn {
  text-transform: none !important;
  font-weight: 700 !important;
  height: 40px !important;
}

// default icon size
$icon-size: 21px;

// Content icon (adds icon-calendar in v-text-field)
.content-icon {
  &.theme--light {
    color: var(--v-txt-base) !important;
  }

  &.theme--dark {
    color: #d5eaf0 !important;
  }

  &:hover {
    .v-text-field__slot {
      &:after {
        color: var(--v-info-base) !important;
      }
    }
  }

  li &:active {
    .v-text-field__slot {
      &:after {
        color: var(--v-info-base) !important;
        opacity: 0.5;
      }
    }
  }

  .v-text-field__slot {
    &:after {
      content: "\e905";
      font-family: "mijnggz";
      color: var(--v-txt-base) !important;
      font-size: 20px;
    }
  }
}

// Content badge (adds an interactive icon-close in v-btn)
.content-badge {
  background-color: #e0f0f4 !important;
  letter-spacing: normal;

  &:after {
    content: "\e907";
    font-family: "mijnggz";
    color: var(--v-secAccent-base) !important;
    font-size: 8px;
    margin-left: 7px;
    margin-top: 4px;
  }

  &:hover:after {
    color: #bb1d28 !important;
  }

  &.theme--dark {
    background-color: var(--v-primary-base) !important;
  }

  &:before {
    background-color: var(--v-badge-base) !important;
  }
}

// Toggle button
.v-input--switch--inset {
  margin: 0px 10px !important;

  .v-input--selection-controls__input {
    .v-input--switch__track {
      color: var(--v-primary-base) !important;
      border: 1px solid var(--v-lines-base) !important;
    }

    .v-input--switch__thumb {
      color: var(--v-lines-base) !important;
    }
  }

  &.v-input--is-label-active {
    .v-input--switch__track {
      color: var(--v-info-base) !important;
      border: none !important;
      opacity: inherit;
    }

    .v-input--switch__thumb {
      color: white !important;
    }
  }
}

//Close-button color in dark mode
.theme--dark .v-btn:not(.v-btn--text):not(.v-btn--outlined).v-btn--active:before {
  opacity: 1;
  color: var(--v-secAccent-base);
}

// Selection box
.v-input--is-label-active {
  .v-icon.notranslate.icon-selectionbox-checked {
    color: var(--v-info-base) !important;
  }
}

// Primary CTA
.cta-primary {
  color: var(--v-primary-base) !important;
  background-color: var(--v-info-base) !important;

  &:hover {
    color: var(--v-info-base) !important;
    background-color: var(--v-primary-base) !important;
    border: 1px solid var(--v-info-base) !important;
  }
}

// Secondary CTA
.cta-secondary {
  color: var(--v-txt-base) !important;
  // height: 60px !important;
  // width: 240px !important;
  background-color: var(--v-primary-base) !important;
  border-radius: 5px !important;
  // background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%c8dde4' stroke-width='3' stroke-dasharray='8%2c6' stroke-dashoffset='11' stroke-linecap='square'/%3e%3c/svg%3e");
  border: 2px dashed var(--v-lines-base) !important;

  &:hover {
    color: var(--v-stroke-base) !important;
    background-color: var(--v-primary-base) !important;
    // background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23003547FF' stroke-width='3' stroke-dasharray='8%2c6' stroke-dashoffset='11' stroke-linecap='square'/%3e%3c/svg%3e");
    border: 2px dashed var(--v-secAccent-base) !important;
  }

  &:active {
    opacity: 0.5 !important;
  }
}

// Interactive CTA
.cta-interactive {
  color: #002937 !important;
  background-color: #e0f4f8 !important;
  border: 1px solid var(--v-stroke-base) !important;

  &:hover {
    color: #ffffff !important;
    background-color: #002937 !important;
  }

  &:active {
    background-color: #002937 !important;
    opacity: 0.5;
    border: none !important;
  }
}

// Autocomplete search
.v-autocomplete {
  .v-input__control {
    .v-input__slot {
      border: 1px solid var(--v-search-base);
      box-shadow: none !important;
      height: auto;

      .v-select__selections {
        .v-chip--select {
          background-color: var(--v-search-base) !important;
          letter-spacing: normal;
          height: 30px;
          border-radius: 25px;
          font-size: 16px;
        }
      }

      .v-input__append-inner {
        .v-input__icon .mdi-menu-down {
          &:before {
            content: "\e90a" !important;
            font-family: "mijnggz" !important;
            color: var(--v-txt-base);
            font-size: 8px !important;
          }
        }
      }
    }
  }

  &.v-select--is-menu-active {
    .v-input__icon .mdi-menu-down {
      &:before {
        color: var(--v-secAccent-base) !important;
      }
    }
  }
}

.v-autocomplete__content {
  width: 620px !important;
  top: 90px !important;
  left: 50% !important;
  margin-left: -310px;

  border: 1px solid var(--v-search-base) !important;
  box-shadow: none !important;
}

.v-autocomplete__content .v-list .v-list-item:not(.v-list-item--active):not(.v-list-item--disabled):hover {
  color: var(--v-primary-base) !important;
}

.users.v-autocomplete__content {
  top: 408px !important;
  left: 366px !important;
  width: 595px !important;
  border: 1px solid var(--v-search-base) !important;
  box-shadow: none !important;

  @media (min-width: 1920px) {
    left: 506px !important;
    top: 539px !important;
    width: 620px !important;
  }

  @media (min-width: 3840px) {
    left: 1328px !important;
    top: 1079px !important;
  }
}

// Actions -> Fields
.v-select.v-select--chips:not(.v-text-field--single-line).v-text-field--box .v-select__selections,
.v-select.v-select--chips:not(.v-text-field--single-line).v-text-field--enclosed .v-select__selections,
.v-select.v-select--chips.v-select--chips--small .v-select__selections {
  min-height: 54px;
}

// Actions + Version show add button in edit mode
.v-dialog__container {
  display: block !important;
}

// Three dot menu
.v-menu__content {
  .v-list {
    .v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
      &:hover {
        color: var(--v-secAccent-base) !important;
        background: var(--v-primary-base) !important;

        .mdi-checkbox-blank-outline {
          &:before {
            color: var(--v-secAccent-base) !important;
          }
        }
      }

      .mdi-checkbox-blank-outline {
        &:before {
          content: "\e921" !important;
          font-family: "mijnggz";
        }
      }
    }

    .v-list-item--active {
      &:before {
        opacity: 0 !important;
      }

      .v-list-item__action .v-simple-checkbox .v-icon {
        color: var(--v-secAccent-base) !important;

        &.mdi-checkbox-marked {
          &:before {
            content: "\e923" !important;
            font-family: "mijnggz";
          }
        }
      }
    }

    .v-list-item {
      color: var(--v-tertiary-base) !important;
      background: var(--v-primary-base) !important;
    }

    .v-list-item__action {
      order: 2;
    }
  }
}

// Badges (Colors for message-badge and message-bar)
.v-badge__badge {
  color: #003547 !important;

  &__red {
    background-color: #ffcccc !important;
    border: 1px solid #bb1d28 !important;

    &::before {
      color: #bb1d28 !important;
    }
  }

  &__orange {
    background-color: #fdeecc !important;
    border: 1px solid #e54e0f !important;

    &::before {
      color: #e54e0f !important;
    }
  }

  &__green {
    background-color: #dbf2cd !important;
    border: 1px solid #1ada79 !important;

    &::before {
      color: #1ada79 !important;
    }
  }
}

// Message badge
.message-badge {
  border-radius: 15px !important;
  padding: 3px 8px 16px 8px;
}

// Message bar
.message-bar {
  width: 230px !important;
  height: 35px !important;
  border-radius: 3px;
  text-align: left;
  padding: 8px 0 !important;

  &::before {
    content: "\e91a";
    font-family: "mijnggz";
    font-size: 15px;
    padding: 0 8px;
  }
}

// tooltip bg-color
$tooltip-background-color: #30b7cd;

// input fields customization
.v-text-field--outlined {
  .v-input__prepend-inner {
    .v-icon {
      color: var(--v-txt-base);
    }
  }

  fieldset {
    border-width: 1px !important;
  }
}

// searchbar customization
// $text-field-outlined-fieldset-border: 2px solid var(--v-secAccent-base);
.v-text-field--outlined.v-input--is-focused fieldset {
  border: 1px solid var(--v-secAccent-base);
}

#searchbar {
  color: var(--v-txt-base) !important;
  caret-color: var(--v-txt-base) !important;
}

#searchbar
  .v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
  > .v-input__control
  > .v-input__slot:hover
  fieldset {
  color: var(--v-primary-base) !important;
}

#searchbar .theme--light.v-text-field--filled > .v-input__control > .v-input__slot {
  background: #ecf6f8 !important;
}

// input regular field outlined color
.v-text-field--outlined {
  > .v-input__control .v-input__slot {
    caret-color: black;

    fieldset {
      color: var(--v-lines-base) !important;
      border-width: 1px !important;
    }
  }
}

.v-sheet--outlined {
  color: var(--v-lines-base) !important;
  border-width: 1px !important;
}

.v-sheet .v-list {
  border-radius: 5px !important;
  color: var(--v-lines-base) !important;
}

// input regular field hover color
.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) {
  > .v-input__control > .v-input__slot:hover fieldset {
    color: var(--v-secAccent-base) !important;
  }
}

// input regular fields disabled
.v-text-field--outlined:not(.v-input--is-focused).v-input--is-disabled > .v-input__control > .v-input__slot fieldset {
  color: var(--v-secDisabled-base) !important;
}

label.v-label.v-label--is-disabled {
  color: var(--v-terDisabled-base) !important;
}

.v-text-field--filled > .v-input__control > .v-input__slot {
  background-color: var(--v-quaDisabled-base) !important;
}

// dropdown fields customization
.v-select.theme--dark.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
  > .v-input__control
  > .v-input__slot
  fieldset {
  color: var(--v-lines-base) !important;
  opacity: 1 !important;
}

.v-select.theme--light.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
  > .v-input__control
  > .v-input__slot
  fieldset {
  color: #d5eaf0 !important;
  opacity: 1 !important;
}

// v-select focus & hover
.v-select.v-text-field--outlined.v-input--is-focused fieldset,
.v-select.v-text-field--outlined.v-input--is-focused > fieldset:hover {
  border: 1px solid #30b7cd !important;
  opacity: 1 !important;
}

.v-select.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
  > .v-input__control
  > .v-input__slot:hover
  fieldset {
  border: 1px solid #30b7cd !important;
  opacity: 1 !important;
}

.v-select.theme--dark.v-text-field--outlined.v-input--is-focused fieldset,
.v-select.theme--dark.v-text-field--outlined.v-input--has-state fieldset {
  border: 1px solid #d5eaf0;
  opacity: 0.24;
}

.v-select.v-select--is-menu-active {
  .v-icon {
    color: #30b7cd !important;
  }
}

// Navigation icon
.icon-menu,
.icon-close {
  &:before {
    // color: var(--v-txt-base); this stlying overrides the color in _user.vue, so I outcommented this one because the styling in _user.vue is scoped
  }

  &:hover:before {
    color: var(--v-secAccent-base);
  }
}

// Interface icon
.icon-fullscreen {
  &:before {
    color: var(--v-tertiary-base);
  }

  &:hover:before {
    color: var(--v-secAccent-base);
  }

  &:active:before {
    color: var(--v-secAccent-base);
    opacity: 0.5;
  }

  &:disabled:before {
    color: var(--v-disabled-base);
  }
}

// quill editor customization

// svg icon color
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  color: var(--v-secAccent-base) !important;
  stroke: var(--v-secAccent-base) !important;
}

// quill editor border color when focused
.quill-editor.focused {
  .ql-toolbar.ql-snow {
    border: 1px solid rgba($color: #30b7cd, $alpha: 1) !important;
  }

  .ql-container.ql-snow {
    border: 1px solid rgba($color: #30b7cd, $alpha: 1) !important;
    border-top: 0px !important;
  }
}

// quill editor border color when hovered
.quill-editor.quill:hover {
  .ql-toolbar.ql-snow {
    border: 1px solid #30b7cd !important;
  }

  .ql-container.ql-snow {
    border: 1px solid #30b7cd !important;
    border-top: 0px !important;
  }
}

// quill editor border color when not focused
.quill-editor.quill {
  .ql-toolbar.ql-snow {
    border: 1px solid var(--v-lines-base);
  }

  .ql-container.ql-snow {
    border: 1px solid var(--v-lines-base);
    border-top: 0px !important;
  }
}

// quil editor border radius
.theme--dark {
  .quill-editor {
    .ql-container,
    .ql-toolbar {
      border: 1px solid rgba($color: #d5eaf0, $alpha: 0.24);
    }
  }
}

.theme--light {
  .quill-editor {
    .ql-container,
    .ql-toolbar {
      border: 1px solid rgba($color: #000000, $alpha: 0.38);
    }
  }
}

.quill-editor {
  .ql-container {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  .ql-toolbar {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .ql-stroke {
    stroke: rgba($color: #5f838e, $alpha: 1);
  }

  .ql-picker-label::before {
    color: rgba($color: #5f838e, $alpha: 1);
  }
}

// quill editor placeholder text customization
.theme--dark {
  .ql-editor {
    p,
    ol,
    ul {
      color: #ffffff;
    }

    a {
      color: var(--v-secAccent-base) !important;
      text-decoration: underline !important;
    }
  }
}

.theme--light {
  .ql-editor {
    p,
    ol,
    ul {
      color: #003547;
    }

    a {
      color: var(--v-secAccent-base) !important;
      text-decoration: underline !important;
    }
  }
}

.ql-editor.ql-blank::before {
  color: #5f838e;
}

// to remove placholder text when focused
.ql-editor.ql-blank:focus::before {
  content: "";
}

// back icon footers
.v-footer {
  .v-btn.v-btn--flat {
    &:before {
      background-color: unset !important;
    }

    .v-btn__content {
      .icon-arrow-left {
        font-size: 12px !important;
      }
    }
  }
}

// icon remove inside input fields
.v-input__slot {
  .icon-close {
    font-size: 16px !important;
  }
}

// vue dropzone
.vue-dropzone {
  background-clip: content-box;
  background-color: var(--v-secondary-base) !important;
  height: 480px;
  border: dashed 3px var(--v-lines-base) !important;
  display: flex;
  align-items: center;

  .dz-message {
    width: 100%;
  }
  .dz-error-message {
    top: unset !important;
  }
}

.vue-dropzone:hover {
  background-clip: content-box !important;
  background-color: var(--v-secondary-base) !important;
  border: dashed 3px var(--v-secAccent-base) !important;
}

// Filter/navigation drawer (menu right)
.v-navigation-drawer {
  border-left: 1px solid var(--v-primary-base);

  .v-list-item--link {
    &::before {
      background-color: unset;
    }
  }

  .v-navigation-drawer__content {
    .v-expansion-panels {
      display: block !important;

      .icon-close {
        font-size: 14px;
        padding-bottom: 30px;
        margin-right: 6px;
        color: var(--v-txt-base) !important;
      }
    }

    .v-expansion-panels--tile {
      padding: 0px 45px 0px 65px;

      &:first-child {
        padding-top: 85px;
      }

      .v-expansion-panel {
        border-top: 1px solid var(--v-lines-base);
        padding: 10px 0px;

        .v-expansion-panel-header {
          padding: 0px !important;
          font-size: 24px;
          font-weight: 600;
          color: var(--v-txt-base) !important;

          i {
            color: var(--v-txt-base) !important;
          }

          .v-application .secondary {
            background-color: unset !important;
          }
        }

        .v-expansion-panel-content {
          .v-expansion-panel-content__wrap {
            padding: 0px !important;

            .v-list-item {
              padding: 0px !important;

              .v-icon,
              .v-list-item__title {
                color: var(--v-txt-base) !important;
              }

              .mdi-checkbox-marked::before {
                color: var(--v-secAccent-base) !important;
              }

              &:hover {
                .v-icon,
                .v-list-item__title {
                  color: var(--v-secAccent-base) !important;
                }
              }
            }
          }
        }
      }
    }
  }
}

//Dark theme background colors
.theme--dark .v-navigation-drawer .v-navigation-drawer__content .v-expansion-panels--tile .v-expansion-panel,
.theme--dark .v-navigation-drawer,
.theme--dark.v-card.v-card--outlined,
.theme--dark.v-list {
  background: var(--v-primary-base) !important;
}

.theme--dark.v-application {
  background: var(--v-secondary-base) !important;
}

.theme--dark .v-navigation-drawer .v-list .v-item-group .v-list-item--active {
  background-color: var(--v-secAccent-base) !important;
}

// chips close
.v-chip {
  background-color: var(--v-primary-base) !important;
  font-size: 16px !important;

  .mdi-close-circle::before {
    font-family: "mijnggz";
    content: "\e907" !important;
    color: var(--v-secAccent-base) !important;
    font-size: 8px;
    margin-left: 2px;
    margin-right: 4px;
    margin-top: 2px;
  }

  .mdi-close-circle {
    &:hover::before {
      color: #bb1d28 !important;
    }
  }
}

.v-select-list {
  padding: 0px !important;
}

//v-picker
.v-picker__body {
  padding-bottom: 30px;

  .v-btn {
    height: 30px !important;
    width: 30px !important;

    .v-btn__content {
      line-height: 30px !important;
    }
  }
}

//tablet styling
@media only screen and (device-width: 768px) {
  .v-data-table {
    th {
      padding: 5px !important;
      font-size: 12px !important;
    }

    td {
      padding: 8px !important;
      font-size: 12px !important;
    }
  }
}

@media only screen and (max-width: 1024px) {
  .plant,
  .cat {
    display: none;
  }

  .v-text-field__slot input {
    color: var(--v-txt-base) !important;
  }
}

//contribution
.v-card .checkbox .v-input__slot {
  background: none !important;
  border: none !important;
}
.v-card .checkbox .v-input__slot .v-input--selection-controls__ripple {
  color: var(--v-txt-base) !important;
}

//employeesMembers

//vue-text-field number hide number arrows
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

//euro icon

.mdi-currency-eur {
  font-size: 16px !important;
  top: -1px !important;
}