.o-spreadsheet {
  .o-color-picker {
    padding: var(--os-picker-padding) 0;
    /* FIXME: this is useless, overiden by the popover container */
    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
    line-height: 1.2;
    overflow-y: auto;
    overflow-x: hidden;
    width: var(--os-container-width);

    .o-color-picker-section-name {
      margin: 0px var(--os-item-border-width);
      padding: 4px var(--os-picker-padding);
    }
    .colors-grid {
      display: grid;
      padding: var(--os-line-vertical-padding) var(--os-picker-padding);
      grid-template-columns: repeat(var(--os-items-per-line), 1fr);
      grid-gap: var(--os-item-gap);
    }
    .o-color-picker-toggler-button {
      display: flex;
      .o-color-picker-toggler-sign {
        display: flex;
        margin: auto auto;
        width: 55%;
        height: 55%;
        .o-icon {
          width: 100%;
          height: 100%;
        }
      }
    }

    --color-picker-item-size: calc(var(--os-item-edge-length) + (2 * var(--os-item-border-width)));

    .o-color-picker-line-item {
      width: var(--color-picker-item-size);
      height: var(--color-picker-item-size);
      margin: 0px;
      border-radius: 50px;
      border: var(--os-item-border-width) solid light-dark(var(--os-gray-600), #c0c0c0);
      padding: 0px;
      font-size: 16px;
      &:hover {
        background-color: var(--os-background-gray-color-hover);
        outline: 1px solid var(--os-gray-500);
        cursor: pointer;
      }
    }
    .eyedropper {
      width: var(--color-picker-item-size);
      height: var(--color-picker-item-size);
      &:hover {
        background-color: var(--os-hovered-menu-item-color);
        color: var(--os-button-active-text-color);
        cursor: pointer;
      }
      .fa {
        font-size: 13px;
      }
    }
    .o-buttons {
      padding: var(--os-picker-padding);
      display: flex;
      .o-cancel {
        width: 100%;
        padding: 5px;
        font-size: 14px;
        background-color: var(--os-white-bg);
        &:hover:enabled {
          background-color: var(--os-background-gray-color-hover);
        }
      }
    }
    .o-add-button {
      padding: 4px;
      background-color: var(--os-white-bg);
      &:hover:enabled {
        background-color: var(--os-background-gray-color-hover);
      }
    }

    .o-custom-selector {
      padding: calc(var(--os-picker-padding) + 2px) var(--os-picker-padding);
      position: relative;
      .o-gradient {
        margin-bottom: calc(var(--os-magnifier-edge) / 2);
        border: var(--os-item-border-width) solid var(--os-gray-300);
        width: calc(var(--os-inner-gradient-width) + (2 * var(--os-item-border-width)));
        height: calc(var(--os-inner-gradient-height) + (2 * var(--os-item-border-width)));
        position: relative;
      }

      .magnifier {
        height: var(--os-magnifier-edge);
        width: var(--os-magnifier-edge);
        border-radius: 50%;
        border: 2px solid var(--os-white);
        box-shadow: 0px 0px 3px var(--os-gray-300);
        position: absolute;
        z-index: 2;
      }
      .saturation {
        background: linear-gradient(to right, #fff 0%, transparent 100%);
      }
      .lightness {
        background: linear-gradient(to top, #000 0%, transparent 100%);
      }
      .o-hue-picker {
        width: 100%;
        height: 12px;
        background: linear-gradient(
          to right,
          hsl(0, 100%, 50%) 0%,
          hsl(0.2turn, 100%, 50%) 20%,
          hsl(0.3turn, 100%, 50%) 30%,
          hsl(0.4turn, 100%, 50%) 40%,
          hsl(0.5turn, 100%, 50%) 50%,
          hsl(0.6turn, 100%, 50%) 60%,
          hsl(0.7turn, 100%, 50%) 70%,
          hsl(0.8turn, 100%, 50%) 80%,
          hsl(0.9turn, 100%, 50%) 90%,
          hsl(1turn, 100%, 50%) 100%
        );
        position: relative;
        cursor: crosshair;
      }
      .o-hue-slider {
        margin-top: -3px;
      }
      .o-custom-input-preview {
        padding: 2px 0px;
        display: flex;
        input {
          width: 50%;
          padding: 4px 23px 4px 10px;
          height: 24px;
          margin-right: 2px;
        }
        .o-wrong-color {
          /* FIXME bootstrap class instead? */
          outline-color: red;
          border-color: red;
          &:focus {
            outline-style: solid;
            outline-width: 1px;
          }
        }
      }
      .o-custom-input-buttons {
        padding: 2px 0px;
        display: flex;
        justify-content: end;
      }
      .o-color-preview {
        width: 50%;
      }
    }
  }
}