@import "~react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
$purple: #002a3a !default; //$primary

$primary: $purple !default;
$border-width: 1px !default;
$border-color: #ebe9f1 !default;
$border-radius: 0.357rem !default;
$border-radius-lg: 0.6rem !default;
$border-radius-sm: 0.25rem !default;

.rdw-editor-wrapper {
  .rdw-editor-toolbar {
    margin-bottom: 0;
    padding: 0.5rem;
    padding-bottom: 0;
    border-color: #eee;
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
    .rdw-option-wrapper {
      border: none;
      &.rdw-option-active {
        box-shadow: none;
        background-color: rgba($color: $primary, $alpha: 0.2);
      }
      &:hover {
        box-shadow: none;
      }
    }
    .rdw-dropdown-wrapper {
      border: 1px solid #eee;
      .rdw-dropdown-optionwrapper {
        &:hover {
          box-shadow: none;
        }
      }
      &:hover {
        box-shadow: none;
      }
    }
    .rdw-link-modal,
    .rdw-embedded-modal {
      height: auto;
    }
  }
  .rdw-editor-main {
    min-height: 10rem;
    padding: 0.5rem 1.2rem;
    border: 1px solid #eee;
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }
  .rdw-editor-toolbar ~ .rdw-editor-main {
    border-top: none;
  }

  &.toolbar-bottom {
    display: flex;
    flex-direction: column;
    .rdw-editor-toolbar {
      order: 2;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
    }
    .rdw-editor-main {
      border-top: 1px solid #eee;
      border-bottom: 0;
      border-top-left-radius: $border-radius;
      border-top-right-radius: $border-radius;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      order: 1;
    }
  }
}

.rdw-editor-wrapper {
  span {
    line-height: 26px;
    font-weight: 500;
  }
}