@import '~wix-rich-content-common/dist/statics/styles/mixins';
@import '~wix-rich-content-common/dist/statics/styles/fonts';

/*** GENERIC ***/
.flex {
  display: flex;
}

/* *:focus,*/
.focused {
}

/*** BLOCK ***/
.hasFocus {
  @include block-select;
}

.overlay {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;

  &.noPointerEventsOnFocus {
    pointer-events: none;
  }
}

.hideTextSelection {
  ::selection {
    background: transparent;
  }
}

.hidden {
  display: none;
}

.pluginContainer,
.pluginContainerReadOnly {
  position: relative;
}

.pluginContainerReadOnly {
  @extend .fontElementMap;
}

.pluginContainer {
  @extend .fontElementMap;

  &:hover {
    @include block-select;

    &.noBorder {
      box-shadow: none;
    }
  }
}

.pluginContainerMobile {
  max-width: 100%;
}

:global {
  .ReactModal__Body--open {
    overflow-y: hidden;
  }

  .ReactModal__Content {
    font-weight: 300;
    direction: ltr;
  }

  .ReactModalPortal {
    @extend .glob_fontElementMap;
    font-family: $ricos-settings-font-family;
    color: $settings-text-color;

    input {
      font-family: $ricos-settings-font-family;
    }
  }
}

button {
  @extend .fontElementMap;
}

.isImage {
  text-decoration: none;
  color: #333333;
}

.anchor {
  display: block;
}

.horizontalScrollbarWrapper {
  position: relative;
}

.pluginWithHorizontalScrollbar {
  overflow-x: auto;
  overflow-y: hidden;
  margin-left: -20px;
  margin-right: -20px;

  &.show::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
  }

  &.hide::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

.horizontalScrollbar {
  max-width: max-content !important;
  min-width: 100%;
}

.pluginWithHorizontalScrollbar::-webkit-scrollbar {
  -webkit-appearance: none;
}

.pluginWithHorizontalScrollbar::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid white;
}

.pluginWithHorizontalScrollbar::-webkit-scrollbar:horizontal {
  height: 10px;
}