.mce-content-body {
  color: var(--mds-t-text-color--primary) !important;
  font-family: var(--mds-d-font-family--primary) !important;
  word-break: break-all;
}

.mce-content-body ul,
.mce-content-body ol {
  padding-left: 20px !important;
}

.mce-content-body ul {
  list-style-type: disc !important;
}

.mce-content-body ol {
  list-style-type: decimal !important;
}

.mce-content-body h1 {
  font-size: var(--mds-d-font-size--xxl);
  line-height: var(--mds-d-line-height--xxl);
}

.mce-content-body h2 {
  font-size: var(--mds-d-font-size--xl);
  line-height: var(--mds-d-line-height--xl);
}

.mce-content-body h3 {
  font-size: var(--mds-d-font-size--lg);
  line-height: var(--mds-d-line-height--lg);
}

.mce-content-body a {
  color: currentcolor;
  cursor: pointer;
  display: inline;
  font-size: inherit;
  font-weight: var(--mds-d-font-weight--medium);
  line-height: inherit;
  position: relative;
  text-decoration: underline;
}

.mce-content-body span {
  font-size: inherit !important;
  line-height: inherit !important;
}

.tox-tinymce-inline {
  display: flex !important;
  width: 100% !important;
}

.tox-collection__item-label {
  color: var(--mds-t-text-color--primary) !important;
}

.tox .tox-collection__item {
  color: var(--mds-t-text-color--primary) !important;
  padding: 0 !important;

  &:hover:not(.tox-tbtn--enabled) {
    background-color: var(--mds-t-background-color--secondary) !important;
  }

  &--active {
    background-color: #fff !important;
  }
}

.tox-collection__item-checkmark svg {
  color: var(--mds-t-text-color--accent);
  font-size: var(--mds-d-font-size--xl);
}

.tox-tinymce-aux {
  display: block !important;
  z-index: 10 !important;
}

.tox .tox-menu {
  border: 1px solid var(--mds-d-border-color--primary) !important;
}

.tox .tox-tbtn svg {
  fill: var(--mds-d-font-color--secondary) !important;
}

.tox .tox-tbtn--enabled {
  background: var(--mds-t-text-color--primary) !important;
}

.tox .tox-tbtn--enabled svg {
  fill: var(--mds-t-text-color--inverse-primary) !important;

  &:hover {
    fill: var(--mds-t-text-color--inverse-primary) !important;
  }
}

.tox-tinymce-inline .tox-editor-header {
  border: 1px soild transparent !important;
}

.tox .tox-tbtn--select {
  border: 1px solid transparent !important;
  color: var(--mds-t-text-color--primary) !important;
  height: 1.5rem !important;
  width: 6.7rem !important;

  &:active {
    background-color: var(--mds-t-border-color--primary);
    color: var(--mds-t-text-color--primary);
  }

  &:hover {
    background-color: var(--mds-t-background-color--secondary) !important;
    border: 1px solid var(--mds-t-border-color--primary) !important;
  }

  &:focus {
    background: #fff !important;

    &:hover {
      background-color: var(--mds-t-border-color--primary) !important;
      border: 1px solid transparent !important;
      color: var(--mds-t-text-color--primary) !important;
    }
  }

  &.tox-tbtn--active {
    background-color: var(--mds-d-background-color--inverse-primary) !important;
    border: var(--mds-t-border-color--primary) !important;

    > .tox-tbtn__select-label {
      color: #fff !important;
    }

    > .tox-tbtn__select-chevron svg {
      fill: #fff !important;
    }
  }
}

.tox .tox-split-button:focus {
  background-color: inherit !important;
}

.tox .tox-button--naked {
  border: solid 1px transparent;
  color: var(--mds-t-text-color--primary) !important;
  font-size: var(--mds-d-font-size--med) !important;
  padding: 0 !important;

  &:active {
    background-color: var(--mds-t-border-color--primary);
    color: var(--mds-t-text-color--primary);
  }

  &:focus {
    background: #fff !important;

    &:hover {
      background-color: var(--mds-d-background-color--secondary) !important;
    }
  }

  &:hover:not(.tox-tbtn--active, .tox-tbtn--enabled) {
    background-color: var(--mds-t-background-color--secondary) !important;
    border: solid 1px var(--mds-t-border-color--primary);
  }
}

.tox .tox-tbtn:not(.tox-tbtn--select, .tox-tbtn--enabled) {
  border: solid 1px transparent;
  font-size: var(--mds-d-font-size--med) !important;
  height: 1.5rem !important;
  margin: 0 2px !important;
  width: 1.5rem !important;

  &:active {
    background-color: var(--mds-t-border-color--primary);
    color: var(--mds-t-text-color--primary);
  }

  &:focus {
    background: #fff !important;
    border: 1px solid transparent !important;

    &:hover {
      background-color: var(--mds-d-background-color--secondary) !important;
      border: solid 1px var(--mds-t-border-color--primary) !important;
      color: var(--mds-t-text-color--primary);
    }
  }

  &:hover:not(.tox-tbtn--active, .tox-tbtn--enabled) {
    background-color: var(--mds-t-background-color--secondary) !important;
    border: solid 1px var(--mds-t-border-color--primary) !important;
  }
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
  background-color: var(--mds-d-background-color--inverse-primary) !important;
  border: none !important;
  height: 1.5rem !important;
  margin: 0 2px !important;
  width: 1.5rem !important;
}

.tox .tox-tbtn--enabled:active {
  background-color: var(--mds-d-background-color--inverse-primary) !important;
  border: none !important;
}

.tox .tox-toolbar__group {
  padding: 0 !important;
}

.tox .tox-toolbar__group:not(:last-of-type) {
  border-right: 1px solid var(--mds-t-border-color--primary) !important;
  flex-wrap: nowrap;
}

.tox .tox-tbtn[aria-label='More...'] {
  position: absolute !important;
  right: 0 !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar__primary {
  background: inherit !important;
  border-bottom: 1px solid var(--mds-t-border-color--primary);
}

.tox.tox-tinymce-aux .tox-toolbar__overflow {
  border: 1px solid var(--mds-t-border-color--primary) !important;
  box-shadow: 0 1px 3px var(--mds-t-border-color--primary) !important;
  flex-wrap: nowrap !important;
  margin-top: var(--mds-d-spacing--med) !important;
  max-width: none !important;
  right: 0 !important;
  top: -48px !important;
}

/* TinyMCE Modal Style Overrides */
.tox .tox-dialog {
  border: 0 transparent !important;
  border-radius: var(--mds-d-border-radius--default) !important;
  box-shadow: var(--mds-d-elevation--4) !important;
  color: var(--mds-t-text-color--primary);
  flex-shrink: 0;
  margin: var(--mds-d-spacing--xxxl) !important;
  max-width: 32rem !important;
  min-width: 32rem;
  width: calc(100% - (var(--mds-d-spacing--lg) * 2)) !important;
  z-index: 1 !important;
}

.tox .tox-dialog-wrap__backdrop {
  background-color: var(--mds-t-background-color--overlay) !important;
  content: '' !important;
  display: block;
  opacity: 0.8;
  position: fixed !important;
  z-index: auto !important;
}

.tox .tox-dialog__body-content {
  flex-shrink: 1 !important;
  margin-bottom: var(--mds-d-spacing--lg) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0 var(--mds-d-spacing--xs) 0 !important;
}

.tox .tox-dialog__body-nav {
  padding: var(--mds-d-spacing--xxl) 0 var(--mds-d-spacing--xxl)
    var(--mds-d-spacing--xxl) !important;
}

.tox .tox-dialog-wrap {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  word-break: break-word;
}

.tox .tox-form__group > label {
  color: var(--mds-t-text-color--primary);
  font-family: var(--mds-d-font-family--primary) !important;
  font-size: var(--mds-d-font-size--med) !important;
  font-weight: var(--mds-d-font-weight--semibold) !important;
  line-height: var(--mds-d-line-height--med) !important;
  padding: 0 0 var(--mds-d-spacing--xs) 0 !important;
}

.tox .tox-form__group:not(:last-child) {
  margin-bottom: var(--mds-d-spacing--xl) !important;
}

.tox-textfield {
  background-color: var(--mds-t-background-color--secondary) !important;
  border: 1px solid var(--mds-t-border-color--primary) !important;
  border-color: var(--mds-t-border-color--primary) !important;
  box-shadow: 0 0 0 1px var(--mds-t-border-color--primary) inset, transparent !important;
  color: var(--mds-t-text-color--primary) !important;
  font-size: var(--mds-d-font-size--med) !important;
  line-height: var(--mds-d-line-height--med) !important;
  max-height: 36px;
  padding: var(--mds-d-spacing--sm) var(--mds-d-spacing--med) !important;

  &:focus {
    background-color: var(--mds-d-background-color--primary) !important;
    border: 1px solid var(--mds-d-background-color--accent) !important;
    box-shadow: 0 1px 3px var(--mds-t-border-color--primary) !important;
  }

  &:hover {
    background-color: var(--mds-d-background-color--primary) !important;
  }
}

.tox .tox-dialog__header {
  padding: var(--mds-d-spacing--xxl) !important;
}

.tox .tox-dialog__title {
  color: var(--mds-t-text-color--primary) !important;
  font-family: var(--mds-d-font-family--primary) !important;
  font-size: var(--mds-d-font-size--xl) !important;
  font-weight: var(--mds-d-font-weight--bold) !important;
  line-height: var(--mds-d-line-height--xl) !important;
}

.tox .tox-rgb-form > label {
  padding: 0 0 var(--mds-d-spacing--xs) 0 !important;
}

.tox .tox-listboxfield .tox-listbox--select {
  color: var(--mds-t-text-color--primary) !important;
  height: 20px !important;

  &:active {
    background-color: var(--mds-t-border-color--primary);
    color: var(--mds-t-text-color--primary);
  }

  &:focus {
    background: #fff !important;

    &:hover {
      background-color: var(--mds-d-background-color--secondary) !important;
    }
  }

  &:hover:not(.tox-listbox--active) {
    background-color: var(--mds-t-background-color--secondary) !important;
  }

  &.tox-listbox--active {
    background-color: var(--mds-d-background-color--inverse-primary) !important;
    color: #fff !important;

    > .tox-listbox__select-chevron svg {
      fill: #fff !important;
    }
  }
}

.tox .tox-button {
  font-family: var(--mds-d-font-family--primary) !important;
  font-size: var(--mds-d-font-size--med) !important;
  font-weight: var(--mds-d-font-weight--semibold) !important;
  line-height: var(--mds-d-line-height--med) !important;
}

.tox .tox-button:not(.tox-button--naked, .tox-button--secondary) {
  background-color: var(--mds-d-color-green--500) !important;
  border: 0 !important;
  margin: calc(var(--mds-d-spacing--xs)) !important;
  padding: var(--mds-d-spacing--sm) var(--mds-d-spacing--sm) !important;

  &:active {
    background-color: var(--mds-d-color-green--700) !important;
  }

  &:hover {
    background-color: var(--mds-d-color-green--600) !important;
  }
}

.tox .tox-button--secondary {
  background-color: transparent !important;
  border: solid 1px transparent !important;
  color: var(--mds-t-text-color--primary) !important;
  margin: calc(var(--mds-d-spacing--xs)) !important;
  padding: var(--mds-d-spacing--sm) var(--mds-d-spacing--sm) !important;

  &:active {
    background-color: var(--mds-t-background-color--tertiary);
  }

  &:hover {
    background-color: var(--mds-t-background-color--secondary) !important;
  }
}

.tox .tox-dialog__footer {
  border-top: none !important;
  padding: 0 var(--mds-d-spacing--xxl) var(--mds-d-spacing--xxl)
    var(--mds-d-spacing--xxl) !important;
}

.tox .tox-dialog__footer-end {
  margin: calc(var(--mds-d-spacing--xs) * -1) !important;
}

.tox .tox-dialog__body-nav-item {
  color: var(--mds-t-text-color--tertiary) !important;
  font-weight: var(--mds-d-font-weight--semibold) !important;
  text-transform: uppercase !important;

  &:active,
  &--active {
    background-color: transparent !important;
    border-bottom: 2px solid var(--mds-d-color-green--500) !important;
    color: var(--mds-t-text-color--primary) !important;
  }

  &:focus {
    background-color: transparent;
  }

  &:hover {
    color: var(--mds-t-text-color--primary) !important;
  }
}