@import (reference) url('./Dropdown.less');
@import (reference) url('./IconButton.less');
@import (reference) url('./Icon.less');
@import (reference) url('./Label.less');
@import (reference) url('./Link.less');
@import (reference) url('./Text.less');

.RichTextEditor {
  border-color: var(--Input-borderColor);
  border-style: solid;
  border-width: 1px;
  position: relative;
}

.RichTextEditor-toolbar {
  .Icon.is-s;
  .Link.is-black;
  .Text.is-s;

  --Link-hoverDecoration: none;

  background: var(--color-white);
  border-color: var(--Input-borderColor);
  border-style: solid;
  border-width: 0 0 1px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--gap-s);
  white-space: nowrap;
}

.RichTextEditor-action,
.RichTextEditor-separator,
.RichTextEditor-menu {
  display: inline-block;
  vertical-align: bottom;
}

.RichTextEditor-action {
  > a {
    display: block;
    line-height: var(--Icon-size);
    padding: calc(var(--gap-s) / 2);

    &[data-icon] {
      height: calc(var(--gap-s) + var(--Icon-size));
      overflow: hidden;
      width: calc(var(--gap-s) + var(--Icon-size));

      &::before {
        .Icon;

        content: attr(data-icon);
        margin-bottom: 100px;
        margin-right: 100px;
        top: 0;
      }
    }

    &.active {
      background: var(--color-gray3);
    }
  }

  &:hover,
  &:focus {
    > a {
      background: var(--color-blue5);
      color: var(--color-white);
    }
  }
}

.RichTextEditor-separator {
  background: var(--Input-borderColor);
  height: calc(var(--gap-xs) * 2 + var(--Icon-size));
  margin: 0 var(--gap-s);
  width: 1px;
}

.RichTextEditor-menu {
  cursor: pointer;
  position: relative;

  > span {
    .Icon.is-s;

    display: block;
    line-height: var(--Icon-size);
    padding: calc(var(--gap-s) / 2);
    padding-right: calc(var(--gap-s) + var(--Icon-size));
    position: relative;

    &::after {
      .Icon;

      content: 'arrow_drop_down';
      pointer-events: none;
      position: absolute;
      right: calc(var(--gap-s) / 2);
      top: calc(50% - var(--Icon-size) / 2);
      transition: transform var(--time-xs);
    }
  }

  > ul {
    .Dropdown;

    z-index: 20;

    > li {
      .Dropdown-item;
    }
  }

  &:hover,
  &:focus {
    > span {
      background: var(--color-blue5);
      color: var(--color-white);
    }
  }

  &.is-open {
    > span {
      background: var(--color-black);
      color: var(--color-white);

      &::after {
        transform: rotate(-180deg);
      }
    }

    > ul {
      .Dropdown.is-open;
    }
  }
}

.RichTextEditor-editor {
  padding: var(--gap-m) 0;
  position: relative;
}

.RichTextEditor-preview {
  background: var(--color-gray1);
  padding: var(--gap-m);

  > img {
    display: block;
    height: auto;
    max-height: 30vh;
    max-width: 100%;
  }
}

.RichTextEditor {
  &:hover,
  &:focus-within {
    &,
    .RichTextEditor-toolbar {
      border-color: var(--Input-focusColor);
    }
  }
}

// Make the toolbar sticky when the user is editing.
.RichTextEditor:focus-within {
  .RichTextEditor-toolbar {
    position: sticky;
    top: var(--lineHeight-s);
    z-index: 20;
  }
}

.RichTextEditor.rte-fullscreen {
  background: var(--color-white);
  border-style: none;
  height: 100%;
  left: 0;
  overflow: auto;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 301;

  .RichTextEditor-toolbar {
    margin-bottom: var(--gap-m);
    padding: var(--gap-s) calc(var(--gap-xl) + 5px);
    top: 0;
  }

  .RichTextEditor-editor {
    padding: 0 var(--gap-xl);
  }
}
