@import "./variables";
@import "./mixins";
@import "./functions";
@import "./antd";

.lsf-editor {
  position: relative;

  .ant-divider-horizontal.ant-divider-with-text-center::before,
  .ant-divider-horizontal.ant-divider-with-text-left::before,
  .ant-divider-horizontal.ant-divider-with-text-right::before,
  .ant-divider-horizontal.ant-divider-with-text-center::after,
  .ant-divider-horizontal.ant-divider-with-text-left::after,
  .ant-divider-horizontal.ant-divider-with-text-right::after {
    border-top-color: #cecece !important;
  }

  .ls-renderall {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .ls-renderall > div {
    width: 49%;
    margin-right: 1%;
  }

  .ls-fade {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
  }

  .htx-highlight > .htx-highlight {
    padding: 2px;
  }

  // .htx-no-highlight {
  //     display: none;
  // }

  .htx-no-label:after {
    display: none;
  }

  .htx-highlight {
    // border: 1px dashed #00aeff;
  }

  .htx-highlight-last {
    // position: relative;
  }

  .htx-highlight-last:after {
    margin-left: 2px;
    // top: -0.3em;
    // margin-right: 2px;
    // position: relative;
    // color: #1f104d;
    // font-size: 75%;
    // font-weight: bold;
  }

  .htx-highlight-vertical:after {
  }

  .htx-yoyo:after {
    content: "Yoyo";
  }

  @keyframes fadeInOpacity {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .ant-list-item-action {
    margin-left: 10px !important;
  }

  .ant-modal-confirm-error ul {
    padding-left: 1.5em;
  }

  .react-dropdown-tree-select .node > .toggle {
    font-family: monospace;
    font-style: normal;
    color: initial;
    cursor: pointer;
  }

  // when node is disabled (when leafsOnly enabled) allow to collapse it by click anywhere
  // achieve this with enormously growing button to the right covering all the text
  .react-dropdown-tree-select .node.disabled > .toggle {
    padding-right: 100%;
    margin-right: -100%;
    position: relative;
    z-index: 1;
    user-select: none;
  }

  .react-dropdown-tree-select .node.disabled > label {
    color: initial;
    cursor: default;
  }

  .react-dropdown-tree-select .node.disabled > label > input {
    opacity: 0;
  }

  h4.ant-typography, div.ant-typography-h4, div.ant-typography-h4 > textarea, .ant-typography h4 {
    color: $main-color-primary;
  }

  .ant-tree {
    background-color: $main-color-white;
    color: $main-color-primary;
  }

  .ant-tree .ant-tree-node-content-wrapper:hover {
    background-color: transparent;
  }

  .ant-list-item,
  .ant-typography,
  .ant-checkbox-wrapper,
  .ant-radio-wrapper,
  .ant-result-title {
    color: $main-color-primary;
  }

  .ant-input {
    color: $main-color-primary;
    background-color: adjust-color($main-color-primary, $alpha: -0.97);
    box-sizing: border-box;
    padding: 8px;
    border: none;
    border-bottom: solid 1px adjust-color($main-color-primary, $alpha: -0.8);

    &:hover,
    &:focus,
    &:active {
      border-color: inherit;
      box-shadow: unset;
      outline: unset;
    }
  }

  .ant-btn-text, .ant-btn-text:hover, .ant-btn-text:focus {
    color: rgba(255, 255, 255, 0.85);
  }

  .ant-table.ant-table-bordered,
  .ant-table.ant-table-bordered > .ant-table-container,
  .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table,
  .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table,
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    background-color: transparent;
    color: $main-color-primary;
    border-color: rgba(255, 255, 255, .1) !important;
  }

  .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table {
    background-color: $main-bg-color;
  }

  .ant-table-tbody > tr.ant-table-row:hover > td,
  .ant-table-tbody > tr > td.ant-table-cell-row-hover {
    background-color: adjust-color($main-color-primary, $alpha: -0.95);
  }

  .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-ellipsis,
  .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis {
    color: $main-color-primary;
  }

  .ant-modal-content {
    background-color: $main-color-white;
  }

  .ant-modal-header {
    background-color: $main-color-white;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .ant-modal-title {
    color: $main-color-white;
  }

  .ant-modal-close {
    color: $main-color-white;
  }

  .ant-modal-close:hover {
    color: #dddddd;
  }

  .ant-tabs-tab {
    color: $main-color-white;
  }

  .ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-bottom > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before, .ant-tabs-bottom > div > .ant-tabs-nav::before {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .ant-table {
    background-color: transparent;
  }

  .lsf-keys__key {
    background: #444 !important;
  }

  .lsf-textarea-tag_outliner .lsf-textarea-tag__input:focus,
  .lsf-textarea-tag_outliner .lsf-textarea-tag__input {
    background-color: rgba(255, 255, 255, .1) !important;
    color: $main-color-white !important;
  }

  .lsf-textarea-tag_outliner .lsf-textarea-tag__input::placeholder {
    color: #666666 !important;
  }

  .ant-slider-handle {
    border-color: $main-color-secondary;
  }

  .ant-slider-track {
    background-color: $main-color-secondary;
  }

  .ant-btn-primary {
    background-color: $main-color-secondary;
    border-color: $main-color-secondary;
    color: $main-color-white;
  }

  .ant-checkbox-checked {
    .ant-checkbox-inner {
      background-color: $main-color-secondary;
      border-color: $main-color-secondary;
    }
  }

  .ant-radio-checked {
    .ant-radio-inner {
      border-color: $main-color-secondary;

      &::after {
        background-color: $main-color-secondary;
      }
    }
  }
}


// Transcription

.transcription-line {
  background-color: rgba(102, 102, 102, 0.1) !important;
  padding: 12px !important;
  display: flex;
  align-items: center;
  &.right {
    textarea {
      color: $main-color-primary !important;
      padding: 0 !important;
      &:active,
      &:focus,
      &:focus-visible {
        border: none;
        outline: unset;
      }
    }
  }
}
