@mixin override-edx-styles {
  box-shadow: none;
  outline: none;
  border: none;
  background: none;
  border-radius: inherit;
  font: inherit;
  height: auto;
  width: auto;
  padding: inherit;
  letter-spacing: 0;
  text-shadow: none;
  text-transform: none;

  &:hover, &:hover:not(:disabled) {
    box-shadow: none;
    outline: none;
    border: none;
    background: none;
    border-radius: inherit;
    font: inherit;
    height: auto;
    width: auto;
    padding: inherit;
    letter-spacing: 0;
    text-shadow: none;
    text-transform: none;
  }
}

@mixin editable-content-tooltip {
  position: relative;

  &:after {
    content: '';
    font-size: calcRem(12);
    line-height: 100%;
    font-weight: normal;
    border-radius: calcRem(30);
    background-color: $base-text-color;
    color: pick-visible-color($base-text-color, #fff, $primary-color);
    position: absolute;
    top: calcRem(10);
    padding: calcRem(5) calcRem(10);
    left: 0;
    opacity: 0;
    transition: none;
  }

  &:hover:after {
    content: 'Click to edit';
    top: calcRem(-20);
    opacity: 1;
    transition: all 0.3s ease-in-out;
  }

  &:focus:after {
    content: 'Click anywhere outside the field to save';
    top: calcRem(-20);
    opacity: 1;
    transition: all 0.3s ease-in-out;
  }
}
