.editProblemView {
  .editProblemView-settingsColumn {
    width: 320px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .advancedEditorTopMargin {
    margin-top: 40px;
  }
}

.tinyMceWidget {
  .tox-tinymce {
    border-radius: 0.375rem;
  }

  .tox {
    .tox-toolbar__primary {
      background: none;
    }
  }

  .tox-statusbar {
    border-top: none;
  }

  .tox-toolbar__group:not(:last-of-type) {
    // TODO: Find a way to override the border without !important
    border-right: none !important;

    &:after {
      content: '';
      position: relative;
      left: 5px;
      border: 1px solid #eae6e5;
      height: 24px;
    }
  }
}

// overrides paragon in order to make checked radio and checkboxes green
$checked-color: '%230D7D4D';

.pgn__form-radio.pgn__form-control-valid input {
  &:checked {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$checked-color}'/></svg>")
  }
}

.pgn__form-checkbox.pgn__form-control-valid input {
  &:checked {
    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='#{$checked-color}'/></svg>");
  }
}
