blue = #273A81; // #5871EF;
grey = lighten(#5871EF, 80%);

.ce-toolbox {
  display: none;
}

.ce-toolbox--opened {
  display: inline-block;
}

.ce-toolbox__plus {
}

.ce-toolbox__button {
  display: inline-block;
  list-style: none;
}

.ce-toolbar__plus {
  display: inline-block;
}

.ce-inline-toolbar__buttons, .ce-inline-toolbar__actions {
  display: block;
}

.ce-inline-tool-input {
  display: none;
  height: 24px;
  margin: 5px;
  padding: 0 10px;
  width: 130px;
  border: none;
  background: rgba(grey, 0.2);
  border-radius: 2px;

  &:focus {
    background: rgba(grey, 0.5);
  }

  outline: none;

  &.ce-inline-tool-input--showed {
    display: block;
  }
}

.ce-inline-tool {
  background: none;
  padding: 0px;
  width: 40px;
  height: 40px;
  display: block;
  float: left;
  border: none;

  &.icon {
    position: relative;
  }

  &.ce-inline-tool .icon {
    &.icon--link {
      display: inline;
    }

    &.icon--unlink {
      display: none;
    }
  }

  &.ce-inline-tool--active .icon {
    fill: blue;

    &.icon--link {
      display: none;
    }

    &.icon--unlink {
      display: inline;
    }
  }
}

.ce-inline-toolbar {
  display: none;
  position: absolute;
  width: 160px;
  margin-left: 10px;
  margin-top: -20px;
  box-shadow: 0 6px 12px -6px rgba(131, 147, 173, 0.46), 5px -12px 34px -13px rgba(97, 105, 134, 0.6), 0 26px 52px 3px rgba(147, 165, 186, 0.24);
  background: white;
  border-radius: 5px;

  &:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(194, 225, 245, 0);
    border-right-color: white;
    border-width: 10px;
    margin-top: -10px;
  }

  // &.ce-inline-toolbar--left-oriented {
  // margin-left: 0px;

  // &:before {
  // top: -8px;
  // left: 8px;
  // border: solid transparent;
  // content: ' ';
  // height: 0;
  // width: 0;
  // position: absolute;
  // pointer-events: none;
  // border-color: rgba(194, 225, 245, 0);
  // border-left-color: white;
  // border-width: 8px;
  // margin-left: -8px;
  // }
  // }

  // &.ce-inline-toolbar--right-oriented {
  // margin-left: -150px;

  // &:before {
  // top: -8px;
  // left: calc(100% - 8px);
  // border: solid transparent;
  // content: ' ';
  // height: 0;
  // width: 0;
  // position: absolute;
  // pointer-events: none;
  // border-color: rgba(194, 225, 245, 0);
  // border-right-color: white;
  // border-width: 8px;
  // margin-left: -8px;
  // }
  // }
  &.ce-inline-toolbar--showed {
    display: block;
  }
}

.codex-editor {
  overflow: hidden;
}