@import (reference) url('../../../../IconButton.less');
@import (reference) url('../../../../Icon.less');
@import (reference) url('../../../../Reset.less');

.ProseMirrorFindReplace {
  &-found {
    background-color: var(--color-yellow2);
  }

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

  &-findContainer {
    background-color: var(--color-gray1);
    display: block;
    margin-bottom: -1px;
    order: 5;
    padding: var(--gap-m);

    &.collapsed {
      display: none;
    }

    &-replaceContainer,
    &-inputContainer {
      align-items: center;
      display: flex;
    }

    &-input,
    &-replace-input {
      background-color: var(--color-white);
      border: none;
      border-radius: var(--gap-l);
      flex: 1 0 48%;
      margin-right: var(--gap-m);
      max-width: 48%;
      padding-left: var(--gap-m);

      &:focus {
        background-color: var(--color-white);
      }
    }

    &-more {
      .Icon;

      cursor: pointer;

      [dir='rtl'] & {
        left: 0;
        right: auto;
      }

      &::before {
        content: 'keyboard_arrow_down';
      }

      &.open {
        &::before {
          content: 'keyboard_arrow_up';
        }
      }
    }

    &-pagination {
      flex: 1 0 0;
      font-size: var(--fontSize-s);

      [dir='rtl'] & {
        left: 10%;
        right: auto;
      }

      &-prev,
      &-next {
        .Icon;
        .Link.is-black;

        background: transparent;
        border: none;
        cursor: pointer;
        padding: unset;

        &.disabled {
          cursor: auto;
          opacity: 0.3;
          pointer-events: none;
        }
      }

      &-prev::before {
        content: 'keyboard_arrow_left';
        margin-right: var(--gap-m);
      }

      &-next::before {
        content: 'keyboard_arrow_right';
        margin-left: var(--gap-m);
      }
    }

    &-replaceContainer {
      align-items: start;
      display: flex;
      flex-flow: column wrap;
      height: auto;
      max-height: 600px;
      overflow: hidden;
      transition: max-height 0.8s;

      > * {
        margin-top: var(--gap-m);
      }

      &.collapsed {
        max-height: 0;
      }
    }

    &-options {
      flex: 1 0 30%;

      label {
        font-weight: 500;
        margin-right: var(--gap-m);
        white-space: nowrap;
      }

      input[type] {
        margin-right: var(--gap-s);
        vertical-align: bottom;
      }
    }

    &-actions {
      button {
        &:first-child {
          background-color: var(--Link-color);
          color: var(--color-white);
          margin-right: var(--gap-m);
        }

        &:disabled {
          cursor: auto;
          opacity: 0.3;
          pointer-events: none;
        }
      }
    }
  }
}

@media (@mq-s) {
  .ProseMirrorFindReplace-findContainer-replaceContainer {
    align-items: center;
    flex-direction: row;
  }

  .ProseMirrorFindReplace-findContainer-actions {
    text-align: right;
    width: 100%;
  }
}

@media (@mq-m) {
  .ProseMirrorFindReplace-findContainer-actions {
    text-align: left;
    width: auto;
  }
}
