@use "@tilde-nlp/ngx-common/styles/typography";
@use "@tilde-nlp/ngx-common/styles/components/dialogs.scss";

@import '@tilde-nlp/ngx-common/styles/mixins/tld-all-mixins.mixin.scss';
@import "colors";
@import "fonts";
@import "mixin/tld-translate-colors";
@import "translator-borders";
@import "@tilde-nlp/ngx-common/styles/material-overrides";

@include tld-translate-colors($primary, $accent);
@include tld-all-mixins();

html,
body {
  height: 100%;
  font-family: $primary-font;
}

a {
  font-weight: 500;
  color: $link-color;
}

.description-text {
  color: $description-text;
  font-size: 16px;
  text-align: justify;

  .description-smaller {
    font-size: 0.8em;
  }

  .description-small {
    font-size: 12px;
  }
}

.tld-translate-target-footer {
  min-height: 84px;
  height: 84px;
  border-top: 1px solid var(--base-70);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.source-wrapper:has(.textarea-overflow) .source-wrapper-action-buttons {
	right: 10px !important;
}

.tld-translate {
  margin: 0;
  font-size: 16px;

  min-height: 530px;
  min-width: 320px;

  ::-webkit-scrollbar {
    width: 10px;
  }

  :not(.textarea-highlight-background) ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }

  :not(.textarea-highlight-background)::-webkit-scrollbar-thumb {
    background: #e8eaec;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  }

  .textarea-with-background .textarea-highlight-background {
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px transparent;
      box-shadow: inset 0 0 6px transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: transparent;
      -webkit-box-shadow: inset 0 0 5px transparent;
      box-shadow: inset 0 0 5px transparent;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
      background: transparent;
    }
  }

  &:not(.tld-translate-tablet) {
    max-width: 100vw;
    max-height: 100%;
    min-height: 400px;
  }

  &.tld-translate-mobile {
    max-width: 100vw;
    max-height: 90dvh;
    height: 576px;
    min-height: 576px;
    max-width: 100vw;
    width: 100vw;
    margin: 0 !important;
    padding: 0 !important;
  }

  &.tld-translate-multiple-files-active {
    max-height: initial !important;
  }

  * {
    max-width: 100%;
  }

  .gramcheck-active {
    .tld-invalid-phrase {
      text-decoration-thickness: 1px;
      text-decoration: underline;
      text-decoration-style: wavy;
      text-decoration-color: $incorrect-phrase-color;
    }
  }

  .highlight-active {
    .tld-word.hovered:not(.tld-invalid-phrase) {
      background-color: $word-highlight;
    }

    .tld-sentence {
      &.selected-sentence {
        background-color: $selected-sentence-background;
      }

      &.hovered {
        background-color: $sentence-highlight;
      }
    }
  }
}

.auto-vertical-overflow {
  overflow-y: auto !important;
}

.tld-translate-mobile {
  .source-wrapper {
    height: 260px;
    min-height: 260px !important;
    overflow-x: hidden;
  }

  .target-wrapper {
    height: 260px;
  }

  .tld-translate-target-footer {
    min-height: 50px;
  }

  .mat-mdc-button {
    padding: 0 !important;
    text-align: left;
    width: 100%;
  }
}

.tld-translate-tablet {
  min-height: 566px;

  .tld-translate-target-footer {
    min-height: 50px;
  }

  .source-wrapper {
    height: 310px;
    min-height: 310px !important;
  }

  .target-wrapper {
    height: 200px;
    min-height: 200px;
  }
}

.tld-translate-web {
  box-sizing: content-box;
  font-family: $primary-font;
  font-size: 14px;

  .url {
    font-family: $primary-font;
  }
}

.collection-name-form-field {
  display: block;
  width: 100%;
}

mat-mdc-dialog-container {
  position: relative;
}

.tld-translate-switcher-container-mobile.tld-switcher-with-collections {
  button {
    padding: 0 !important;
  }
}

.mat-mdc-input-element {
  caret-color: black;
}

.tld-collection-menu {
  min-width: 320px !important;
  max-width: 480px !important;
  width: 100% !important;
  position: relative;
  max-height: 600px !important;

  tld-close-button {
    position: absolute;
    right: 0;
  }

  .mat-mdc-menu-content {
    padding: 0 !important;
  }
}

.tld-word,
.multiple-word-wrapper {
  display: inline-block;
}

tld-highlight-tree div,
.textarea-with-background textarea,
.textarea-highlight-background,
.asr-result-wrapper {
  outline: none;
  border: none;
  font-size: 1em;
  background-color: transparent;
  font-family: $primary-font;
  line-height: 1.5;
  word-break: break-word;
  letter-spacing: 0.5px;
}

.full-width {
  width: 100%;
}

[source-language="ar" i] .textarea-with-background,
[source-language="fa" i] .textarea-with-background,
[source-language="ur" i] .textarea-with-background,
[source-language="he" i] .textarea-with-background,
[source-language="ur" i] .textarea-with-background,
[source-language="ps" i] .textarea-with-background,
[source-language="sd" i] .textarea-with-background,
[source-language="dv" i] .textarea-with-background,
[source-language="yi" i] .textarea-with-background,
[source-language="ar" i] .source-text,
[source-language="fa" i] .source-text,
[source-language="ur" i] .source-text,
[source-language="he" i] .source-text,
[source-language="ur" i] .source-text,
[source-language="ps" i] .source-text,
[source-language="sd" i] .source-text,
[source-language="dv" i] .source-text,
[source-language="yi" i] .source-text,
[target-language="ar" i] .translated-source,
[target-language="fa" i] .translated-source,
[target-language="ur" i] .translated-source,
[target-language="he" i] .translated-source,
[target-language="ur" i] .translated-source,
[target-language="ps" i] .translated-source,
[target-language="sd" i] .translated-source,
[target-language="dv" i] .translated-source,
[target-language="yi" i] .translated-source {
  direction: rtl;
  text-align: right;
}

#docPreviewContent span {
  display: inline-block;
}

.btn-as-link {
  background: transparent;
  text-decoration: underline;
  border: none;
  cursor: pointer;
  font-weight: 500;
  font-family: $primary-font;
  color: $primary;
  font-size: 16px;
  line-height: 36px;
}

a.no-underline,
a.no-underline:hover {
  text-decoration: none;
}

p.term-window-description {
  margin: 0;
}

/* For language menu. With flex layout it would be lt-md*/
@media only screen and (max-width: 959px) {

  div.language-menu-overlay,
  div.language-menu-overlay .language-menu {
    $width: 100%;
    min-width: $width;
    width: $width;
    max-width: $width;
    max-height: 330px;
  }
}

/*Overflow must be hidden because textareas oferflow is scrollable*/
tld-translate-text .source-container {
  overflow: hidden !important;
}

.system-picker-button,
.system-picker-button button.mat-mdc-button {
  display: block !important;
  cursor: pointer;
  border: none;
  background-color: transparent;

  +.system-picker-button {
    margin-top: 0.75rem;
    text-align: left;
  }

  .system-picker-button:not(.active),
  .system-picker-button button.mat-mdc-button:not(.active) {
    color: var(--base-30);
  }

  .filter-highlight {
    font-weight: 600;
  }

  &.opened,
  &.active {
    color: var(--accent);
  }

  &.active::after {
    content: '✓';
    margin-left: 3rem;
  }
  &:hover .mat-mdc-button-focus-overlay {
    opacity: 0 !important;
  }
}

.mat-mdc-form-field-appearance-outline .mat-mdc-form-field-infix {
  padding: 0.95em 0 0.60em 0 !important;
  border-top: 0;
}

tilde-translate-box tld-translate-button {
  margin: 0 !important;
  margin-right: 1em !important;
}

.mat-mdc-dialog-container .mdc-dialog__content textarea {
  font-family: $primary-font !important;
  font-size: inherit;
}
