.canvasColorDot {
  display: inline-block;
  position: relative;
  height: $euiSizeXL;
  width: $euiSizeXL;

  .canvasColorDot__background {
    position: absolute;
    height: $euiSizeXL;
    width: $euiSizeXL;
    border-radius: $euiBorderRadius;
    top: 0;
    left: 0;
  }

  .canvasColorDot__foreground {
    position: absolute;
    border: $euiBorderThin;
    height: $euiSizeXL;
    width: $euiSizeXL;
    border-radius: $euiBorderRadius;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
