// THERE ARE OTHER IMPORTS IN THE END OF THE FILE DEPENDS ON THE OBRDER OF NEEDED STYLES
@import '@filerobot/core/lib/_variables.scss';
@import '@filerobot/core/lib/_utils.scss';


.filerobot-Explorer-assets-picker-modal {
  z-index: $zIndex-modal;
}

// !!! Deprecated (ui-kit Button should be used instead)
// TODO Remove after Button is changed to ui-kit everywhere
// ==================================================================
// ============================ Buttons =============================
// ==================================================================
.filerobot-common-BaseButton {
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  outline: none;
  position: relative;
  user-select: none;
  transition: all 100ms ease-in-out;

  span[role='container'] {
    z-index: 4;
    display: flex;
    align-items: center;
  }

  @media (max-width: 636px) {
    min-width: 32px;
    min-height: 28px;
    padding: 2px 6px;
  }

  span:not[role='container'] {
    @media (max-width: 636px) {
      display: none;
    }
  }

  &:before {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    background: $active-transition;
    opacity: 0;
    border-radius: 15px 2px 15px 5px;
    transition: width 0.07s ease-in-out, border-radius 0.15s ease-in-out;
  }

  &:not(:disabled):active {
    opacity: 1;

    &:before {
      opacity: 1;
      border-radius: inherit;
      width: 100%;
    }
  }

  &:disabled {
    color: $gray-400;
    fill: $gray-400;
    cursor: not-allowed;
    opacity: 0.8;
    background: rgba(79, 98, 118, 0.7);

    *,
    &:before {
      background: none;
      fill: currentColor;
      color: currentColor;
    }
  }
}

.filerobot-common-BaseButton-auto {

  &:not(disabled){
    :hover,
    :focus {
      background: $hover;

      * {
        color: $active;
        fill: $active;
      }
    }
  }
}

.filerobot-common-BaseButton-transparent {
  background: transparent;
  color: $active;

  &:not(:disabled) {
    &:hover,
    &:focus {
      background: $hover;

      svg * {
        color: $active;
        fill: $active;
      }

      * {
        color: $active;
      }
    }
  }
}

.filerobot-common-BaseButton-primary {
  color: $white;
  background: $primary;

  &:not(:disabled):hover {
    filter: brightness(1.1);
  }
}

.filerobot-common-BaseButton-accent {
  color: $white;
  background: $accent;

  &:not(:disabled):hover {
    filter: brightness(1.1);
  }

  &:before {
    background: $accent-active;
  }
}

.filerobot-common-BaseButton-secondary {
  color: $white;
  background: $secondary;

  &:not(:disabled):hover {
    filter: brightness(1.1);
  }
}

.filerobot-common-BaseButton-activeSecondary {
  color: $active;
  background: $active-secondary;
}

.filerobot-common-BaseButton-small {
  font-size: 12px;
  padding: 2px 6px;

  &.filerobot-common-LabeledIconButton {
    img {
      min-height: 12px;
      min-width: 12px;
      max-height: 12px;
      max-width: 12px;

      [data-filerobot-floaty="true"] & {
        min-height: 14px;
        min-width: 14px;
        max-height: 14px;
        max-width: 14px;
      }
    }

    span:not([role='container']) {
      margin-left: 4px;
    }
  }
}

.filerobot-common-BaseButton-medium {
  font-size: 15px;
  line-height: 16px;

  &.filerobot-common-LabeledIconButton {
    img {
      min-height: 12px;
      min-width: 12px;
      max-height: 12px;
      max-width: 12px;

      [data-filerobot-floaty="true"] & {
        min-height: 14px;
        min-width: 14px;
        max-height: 14px;
        max-width: 14px;
      }
    }
  }
}

.filerobot-common-BaseButton-large {
  font-size: 17px;
  padding: 8px 14px;

  &.filerobot-common-LabeledIconButton {
    img {
      min-height: 16px;
      min-width: 16px;
      max-height: 16px;
      max-width: 16px;
    }
  }
}

.filerobot-common-BaseButton-fullWidth {
  font-size: 17px;
  width: 100%;

  &.filerobot-common-LabeledIconButton {

    svg,
    img {
      min-height: 16px;
      min-width: 16px;
      max-height: 16px;
      max-width: 16px;
    }

    span:not([role='container']) {
      margin-left: 8px;
    }
  }
}

.filerobot-common-LabeledIconButton-label {
  margin-left: 4px;
}

.filerobot-common-BadgeButton {
  padding: 8px 12px;
  margin-right: 4px;

  .filerobot-common-BadgeButton-badgeContent {
    border-radius: 50%;
    color: $accent;
    background: $white;
    font-weight: 500;
    margin-left: 4px;
    font-size: 10px;
    width: 14px;
    height: 14px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  &-activeSecondary {
    .filerobot-common-BadgeButton-badgeContent {
      color: $white;
      background: $active;
    }
  }
}

.filerobot-common-BackCloseButton {
  display: flex;
  align-items: center;
}

.filerobot-common-BackCloseButton-button {
  padding: 6px;
}

.filerobot-common-BackCloseButton-buttonMargin {
  margin: 0 6px;
}

.filerobot-common-BackCloseButton-divider {
  height: 22px;
}

// ==================================================================
// ============================= Blocks =============================
// ==================================================================
// packages/@filerobot/common/src/BackdropOverlay.jsx
.filerobot-common-BackdropOverlay {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: $zIndex-highest-1;
}

.filerobot-common-BackdropOverlay--floaty-colored {
  display: none;

  [data-filerobot-floaty="true"] & {
    display: block;
    background: $shadow-color;
  }
}

// <<

// !!! Deprecated (ui-kit should be used instead)
// ==================================================================
// ============================= Divider ============================
// ==================================================================
.filerobot-common-verticalDivider {
  background: $border;
  width: 1px;
}

// !!! Deprecated (ui-kit should be used instead)
// ==================================================================
// ============================== Radio =============================
// ==================================================================
.filerobot-common-Radio-wrapper {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  padding: 8px 0;

  &:first-child {
    padding-top: 0;
  }

  &:last-child {
    padding-bottom: 0;
  }
}

.filerobot-common-Radio {
  display: inline-block;
  padding-right: 8px;
}

.filerobot-common-Radio-label {
  font-size: 16px;
  line-height: 18px;
  color: $darkgrey;
}

// ==================================================================
// =========================== FormGroup ==========================
// ==================================================================
// packages/@filerobot/common/src/FormGroup.jsx
.filerobot-common-FormGroup {
  &:not(:last-child) {
    margin-bottom: 16px;
  }
}

// ==================================================================
// =========================== FormControl ==========================
// ==================================================================
// packages/@filerobot/common/src/FormControl.jsx
.filerobot-common-FormControl {
  &-inline {
    display: flex;
  }

  &-with-hint {
    margin-bottom: 0;
  }

  &-error {
    color: $error;

    .filerobot-common-InputLabel,
    .filerobot-common-FormHelperText,
    .SfxLabel-root,
    .SfxFormHint-root {
      color: $error;
    }

    &:not(:has([data-valid='true'])) {
      .SfxInput-root,
      .filerobot-common-Textarea,
      .filerobot-common-Select,
      .filerobot-common-Input,
      .SfxInput-root {
        color: $error;
        border-color: $error;
        background: $white;
        outline-color: $error;
    
        &:focus-within,
        &:focus,
        &:hover {
          border: 1px solid $error;
          outline: none;
        }
      }
    }
  }
}

// ==================================================================
// =========================== InputLabel ===========================
// ==================================================================
// packages/@filerobot/common/src/InputLabel.jsx
.filerobot-common-InputLabel {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 400;
  color: $secondary;
}

// ==================================================================
// ========================== FormHelperText ========================
// ==================================================================
// packages/@filerobot/common/src/InputLabel.jsx
.filerobot-common-FormHelperText {
  margin-top: 3px;
  font-size: 10px;
  color: $secondary;

  &-medium {
    font-size: 14px;
  }

  &-no-margin {
    margin: 0;
  }
}

// ==================================================================
// =========================== AutoSuggest ==========================
// ==================================================================
// packages/@filerobot/common/src/AutoSuggest.jsx
.filerobot-common-autoSuggest {
  position: relative;

  &-list-wrapper {
    position: absolute;
    z-index: 11111111111111;
  }
}

.suggestions {
  &-list {
    border: 1px solid #ddd;
    border-radius: 2px;
    list-style: none;
    margin-top: 0;
    margin-left: 125px;
    padding-left: 0;
    font-size: 14px;
    background-color: #fff;
    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;

    & li {
      padding: 0.5rem;
      font-size: 1rem;
    }
  }

  &-tags {
    display: inline-flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;

    & li {
      position: relative;
      align-items: center;
      margin: 0 8px 8px 0;
      padding: 4px 12px;
      border-radius: 2px;
      border: 1px dashed $active;
      background: transparent;
      color: $active;
      display: flex;
      font-family: 'Roboto';
      font-size: 14px;
      line-height: 16.4px;
      font-weight: 400;
      list-style: none;
      user-select: none;
      max-height: 24px;

      &:hover .filerobot-c-icon {
        display: block;
      }

      .filerobot-c-icon {
        display: none;
        position: absolute;
        top: 3px;
        right: 3px;
        width: 6px;
        height: 6px;
        color: $white;
      }
    }

    & li button {
      align-items: center;
      appearance: none;
      background: transparent;
      border: none;
      border-radius: 50%;
      color: $secondary;
      cursor: pointer;
      display: inline-flex;
      font-size: 12px;
      height: 15px;
      justify-content: center;
      line-height: 0;
      margin-left: 8px;
      padding: 0;
      transform: rotate(45deg);
      width: 15px;
    }
  }
}

.no-suggestions {
  color: #999;
  padding: 0.5rem;
}

.suggestions-title {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  padding: 4px 0;

  svg {
    margin-right: 4px;
  }
}

.post-upload-suggestion {
  margin-left: 0;
  width: 100%;
}

.suggestion-active,
.suggestions li:hover {
  cursor: pointer;
  background: $active;
  color: $white;
  border: 1px solid $active;
}

.suggestion-loading {
  display: flex;
  height: 100px;
  font-size: 1rem;
  justify-content: center;
  align-items: center;
}

// ==================================================================
// =========================== CheckBox =============================
// ==================================================================
// packages/@filerobot/common/src/Checkbox.jsx
.filerobot-common-Checkbox-wrapper {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.filerobot-common-Checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  max-height: 16px;
  min-width: 16px;
  max-width: 16px;
  margin-right: 12px;
  background: $background-primary;
  border: 1px solid $border;
  border-radius: 1px;
  outline: none;
  text-align: center;
  cursor: pointer;
}

.filerobot-common-Checkbox-label {
  font-size: 12px;
  line-height: 14px;
  max-width: calc(100% - 16px); // 16px = width of the checbox input
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// ==================================================================
// =========================== Tabs =============================
// ==================================================================
// packages/@filerobot/common/src/Tabs.jsx
.filerobot-common-Tabs-wrapper {
  display: flex;
  width: 92%;
  padding-left: 12px;

  [data-filerobot-floaty="true"] & {
    padding-left: 20px;
  }
}

.filerobot-common-Tabs {
  display: flex;
  border-bottom: 1px solid $border;
  border-top: 1px solid $border;
  background-color: $background-primary;
  align-items: center;

  &-panel {
    position: relative;
    margin-bottom: -1px;
    font-size: 12px;

    &>input[type="radio"] {
      position: absolute;
      left: -200vw;
    }

    .bottom-line {
      display: none;
      position: absolute;
      background: $accent;
      bottom: 0;
      left: 7px;
      right: 7px;
      height: 1px;

      [data-filerobot-floaty="true"] & {
        left: 10px;
        right: 10px;
      }
    }

    &>label {
      color: $active;
      position: relative;
      display: flex;
      padding: 7px;
      border: 1px solid transparent;
      border-top-left-radius: .10rem;
      border-top-right-radius: .10rem;
      cursor: pointer;

      [data-filerobot-floaty="true"] & {
        padding: 15px 10px;
      }

      &>svg {
        margin-right: 8px;
        height: 12px;
        width: 12px;


      }

    }

    &:first-child {
      &>label {
        padding-left: 0;

        +.bottom-line {
          left: 0;
        }
      }
    }

    &>input:checked+label {
      color: $accent;
      //border-bottom: 1px solid $accent;



      +.bottom-line {
        display: block;
      }
    }
  }

  .subtabs-wrapper {
    padding: 12px 0;
  }
}

// ==================================================================
// =========================== InputAndLabel =============================
// ==================================================================
// packages/@filerobot/common/src/InputAndLabel.jsx
.filerobot-common-inputAndLabel {
  margin-bottom: 16px;

  &-form-group {
    margin-bottom: 19px;

  }

  &-input-header {
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    margin-bottom: 3px;
  }

  &-header-links-label {
    display: flex;
    align-items: center;
    color: $light-icons-primary;
  }

  &-input-text-wrapper {
    position: relative;
    width: 100%;

    input[type="time"]::-webkit-calendar-picker-indicator {
      opacity: 0;
      display: block;
      width: 20px;
      height: 20px;
      z-index: 2;
      margin-top: 2px;
      cursor: pointer;
    }

    &-disable-icon {
      & input[type="date"]::-webkit-calendar-picker-indicator {
        display: none;
      }

    }
  }

  &-input-icon {
    position: absolute;
    top: 0;
    right: 0;
    margin: 6px;
    cursor: pointer;
  }

  &-input-text {
    width: 100%;
    font-size: 16px;
    line-height: 18px;
    padding: 10px 16px;
    background-color: $white;
    border: 1px solid $border-primary-stateless;
    border-radius: 4px;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    cursor: auto;
    font-family: 'Roboto';
    font-weight: 400;

    &:focus {
      background-color: $background-secondary !important;
      border: 1px solid rgba(104, 121, 235, 1);
      outline: none;
    }

    &:hover {
      background-color: rgba(239, 243, 246, 1);
    }
  }


}

// ==================================================================
// ============================== Spinner ===========================
// ==================================================================
// packages/@filerobot/common/src/Spinner.jsx
.filerobot-common-Spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;

  svg {
    -webkit-animation: rotating-spinner 2s linear infinite;
    -moz-animation: rotating-spinner 2s linear infinite;
    -ms-animation: rotating-spinner 2s linear infinite;
    -o-animation: rotating-spinner 2s linear infinite;
    animation: rotating-spinner 2s linear infinite;
  }
}

.filerobot-common-Spinner-noMargin {
  margin: 0;
}

.filerobot-common-Spinner-filledCentered {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px;
}

.filerobot-common-Spinner-spinnerContainer {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;

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

@-webkit-keyframes rotating-spinner

/* Safari and Chrome */
  {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating-spinner {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

// ==================================================================
// ===================== ItemHoverTopOptions ======================
// ==================================================================
// Used in a few places
.filerobot-common-ItemHoverTopOptions {
  position: absolute;
  top: 4%;
  right: 3%;
  bottom: 0;
  display: flex;
  visibility: hidden;
  z-index: 3; //top left badge (relevance, similarity) has z-index of 2
  width: 100%;
  justify-content: flex-end;
  padding: 2px 4px 2px 24px; // 24px = the spacing + width of checkbox (in case there is)
  align-items: flex-start;
  pointer-events: none;
  border-radius: inherit;
  transition: all 100ms ease-in-out;

  button {
    min-width: 12px;
    min-height: 16px;
    padding: 4px 7px;
    height: auto;
    pointer-events: auto;
    background: rgba(79, 98, 118, 0.7);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 0 2px;
    transition: all 100ms ease-in-out;

    svg * {
      color: $white;
      fill: $white;
    }

    &:not(:active, :disabled) {
      &:hover {
        background: rgba(55, 65, 75, 1);

        svg * {
          fill: $border;
          color: $border;
        }
      }
    }
  }

  *:hover>& {
    visibility: visible;
  }

  &-disableHover {
    display: flex;
    visibility: visible;

    &:hover {
      background: none;
    }
  }
}

.filerobot-common-DropFilesHereHint {
  visibility: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  text-align: center;
  color: $secondary;
  font-size: 24px;
  line-height: 28px;
  background-color: rgba(255, 255, 255, .9);

  &-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 7px;
    right: 7px;
    bottom: 7px;
    left: 7px;
    border: 1px dashed $blue;
    border-radius: 3px;

    svg {
      margin-bottom: 25px;
      animation: 2s moving ease infinite;
    }

    @keyframes moving {

      0%,
      100% {
        transform: scale(1) translate(0, 0);
      }

      50% {
        transform: scale(1.1) translate(0, -10px);
      }
    }
  }

  [data-filerobot-theme="dark"] & {
    color: $gray-400;
    border-color: $highlight--dark;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 1v1C11.85 2 2 11.85 2 24s9.85 22 22 22 22-9.85 22-22S36.15 2 24 2V1zm0 0V0c13.254 0 24 10.746 24 24S37.254 48 24 48 0 37.254 0 24 10.746 0 24 0v1zm7.707 19.293a.999.999 0 1 1-1.414 1.414L25 16.414V34a1 1 0 1 1-2 0V16.414l-5.293 5.293a.999.999 0 1 1-1.414-1.414l7-7a.999.999 0 0 1 1.414 0l7 7z' fill='%2302BAF2' fillRule='nonzero'/%3E%3C/svg%3E");
  }
}

.filerobot-common-DropFilesTarget * {
  pointer-events: none;
}

.filerobot-common-DropFilesHereHint-visible {
  visibility: visible;
}

.filerobot-common-Search {
  .filerobot-c-separator {
    height: 70%;
    margin: 0;
  }
}

.filerobot-common-Search-searchButton {
  height: 100%;
  padding: 12px;
  padding-top: 10px;
  cursor: pointer;
}

.filerobot-common-Search {
  display: flex;
  position: relative;
  height: 40px;
  background: $white;
  border: 1px solid $border;
  border-radius: 4px;
  align-items: center;
  white-space: nowrap;

  [data-filerobot-floaty="true"] & {
    padding-left: 0px;
  }

}


.filerobot-common-Search:focus-within,
.filerobot-common-Search:active {
  background-color: rgba(255, 255, 255, 1) !important;

  .filerobot-common-Search-searchInput {
    background-color: rgba(255, 255, 255, 1) !important;
  }
}

.filerobot-common-Search-searchInput {
  height: fit-content;
  flex-grow: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 14px;
  outline: none;
  border: none;
  min-width: 24px;
  width: 100%;
  margin: 6px 0px;

  button {
    height: 100%;
  }

  .filerobot-common-TopBar-input-fragment {
    display: inherit;
    height: inherit;
    width: inherit;
  }

  &:focus {
    outline: none;
  }

  [data-filerobot-theme="dark"] & {
    background-color: $gray-900;
  }

  [data-filerobot-theme="dark"] & {
    color: $white
  }

  &::placeholder {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    color: #A9B6C2;
  }
}

.filerobot-common-Search-searchAndAppendedOptions {
  display: flex;
  align-items: center;
  height: 100%;
}

.filerobot-common-Search-searchAndFiltersInputs {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  max-height: 100%;
  // width: calc(100% - 62px); // 32px =  search button & separator width.
  flex-grow: 1;
  overflow: auto hidden;
  white-space: nowrap;
  -ms-overflow-style: none;

  // TODO: Should be uncommented for Search Context or add any other search field left elements.
  // [data-filerobot-floaty="true"] & {
  //   padding-left: 0px;
  // }
}

// Powered by label
// packages/@filerobot/common/src/PoweredBy.jsx
.filerobot-common-PoweredBy-label {
  border: 1px solid $border;
  border-bottom: 0;
  background-color: $background-primary;
  border-radius: 0;
  color: #778285;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 4px 14px;
  border-top-left-radius: 40px;
  font-size: 10px;
  user-select: none;
  z-index: $zIndex-1;
  margin-right: -1px;

  [data-filerobot-floaty="true"] & {
    position: fixed;
  }
}

// !!!!! MUST BE LAST BLOCK IN THE FILE AS IT OVERRIDES SOME OF TOP STYLES !!!!!
// ==================================================================
// ===================== Common Public classes ======================
// ==================================================================
// used in a few places
.filerobot-common-secondaryTxt {
  color: $gray-500;
  font-size: 12px;
  line-height: 14px;
}

@import './Transitions/transitions.scss';
@import './DatePicker/index.scss';