/*
 * This file is generated by o-spreadsheet build tools. Do not edit it.
 * @see https://github.com/odoo/o-spreadsheet
 * @version 19.1.4
 * @date 2026-01-21T11:08:12.696Z
 * @hash ceae12a
 */
:root {
  --os-gray-100: light-dark(#f9fafb, #1b1d26);
  --os-gray-200: light-dark(#e7e9ed, #262a36); /* GRAY_200 */
  --os-gray-300: light-dark(#d8dadd, #3c3e4b); /* GRAY_300 */
  --os-gray-400: light-dark(#ced4da, #5a5e6b);
  --os-gray-500: light-dark(#7c7f89, #6b707f);
  --os-gray-600: light-dark(#5f636f, #7e8392);
  --os-gray-700: light-dark(#374151, #b1b3bc);
  --os-gray-800: light-dark(#1f2937, #d1d1d1);
  --os-gray-900: light-dark(#111827, #e4e4e4); /* GRAY_900 */

  --os-white: light-dark(#ffffff, #000000);
  --os-black: light-dark(#000000, #ffffff);
  --os-white-bg: light-dark(#ffffff, var(--os-gray-200));

  --os-default-font: "Roboto", "Arial";
  --os-default-font-size: 10px;
  --os-link-color: light-dark(#017e84, #02c7b5);
  --os-link-hover-color: light-dark(#01585c, #4ed8cb);
  --os-text-body: light-dark(#374151, #e4e4e4); /* TEXT_BODY */
  --os-text-body-muted: light-dark(#374151c2, #b1b3bcc2); /* TEXT_BODY_MUTED */
  --os-disabled-text-color: light-dark(#cacaca, #ffffff80);

  --os-button-bg: light-dark(var(--os-gray-200), var(--os-gray-300));
  --os-button-hover-bg: light-dark(var(--os-gray-300), var(--os-gray-400));
  --os-button-hover-text-color: var(--os-gray-900);
  --os-button-active-bg: light-dark(#e6f2f3, #17373b);
  --os-button-active-text-color: var(--os-gray-900);
  --os-primary-button-bg: light-dark(#714b67, #6b3e66);
  --os-primary-button-hover-bg: light-dark(#624159, #7b4775);
  --os-primary-button-active-bg: light-dark(#f1edf0, #8b5185);
  --os-primary-button-text-color: light-dark(#ffffff, #ffffff);
  --os-action-color: var(--os-link-color); /* ACTION_COLOR */
  --os-action-color-hover: var(--os-link-hover-color);
  --os-border-color: light-dark(var(--os-gray-300), var(--os-gray-400));

  --os-composer-placeholder-color: light-dark(#bdbdbd, #757a89);
  --os-composer-assistant-color: #9b359b; /* COMPOSER_ASSISTANT_COLOR */
  --os-composer-assistant-background: light-dark(#f2f2f2, var(--os-gray-200));
  --os-composer-highlight-flag-color: #e6edf3;
  --os-composer-selector-flag-color: #a9a9a9;

  --os-selection-border-color: #3266ca; /* SELECTION_BORDER_COLOR */
  --os-badge-selected-color: var(--os-button-active-bg);
  --os-figure-border-color: var(--os-gray-400);
  --os-background-gray-color: light-dark(#f5f5f5, var(--os-white-bg));
  --os-background-gray-color-hover: light-dark(rgba(0, 0, 0, 0.08), #ffffff40);
  --os-frozen-pane-header-border-color: #bcbcbc; /* FROZEN_PANE_HEADER_BORDER_COLOR */
  --os-grid-border-color: light-dark(#e2e3e3, var(--os-gray-200));
  --os-separator-color: var(--os-gray-300);
  --os-green-arrow-color: #6aa84f; /* Same color as CF arrow icon */
  --os-red-arrow-color: #e06666; /* Same color as CF arrow icon */
  --os-active-sheet-bg: light-dark(#ffffff, var(--os-gray-300));

  --os-alert-warning-bg: light-dark(#fbebcc, #3a2a05);
  --os-alert-warning-border: light-dark(#f8e2b3, #5a420a);
  --os-alert-warning-text-color: light-dark(#946d23, #f5d27b);
  --os-alert-danger-bg: light-dark(#d44c591a, #3a0b0f);
  --os-alert-danger-border: light-dark(#c34a41, #a23c36);
  --os-alert-danger-text-color: light-dark(#c34a41, #ffb3a9);
  --os-alert-info-bg: light-dark(#cdedf1, #18535e);
  --os-alert-info-border: light-dark(#98dbe2, #22747e);
  --os-alert-info-text-color: light-dark(#09414a, #9ee3ec);

  --os-chart-preview-orange-line: light-dark(#eb6d00, #ff9d4d);
  --os-chart-preview-orange-fill: light-dark(#ffe1c8, #734200);
  --os-chart-preview-orange-light: light-dark(#ff9d4d, #eb6d00);
  --os-chart-preview-orange-dark: light-dark(#a34c00, #c96a1e);
  --os-chart-preview-blue-line: light-dark(#0074d9, #4cb3ff);
  --os-chart-preview-blue-fill: light-dark(#c4e4ff, #003e73);

  --os-header-height: 26px;
  --os-header-width: 48px;
  --os-desktop-topbar-toolbar-height: 34px;
  --os-mobile-topbar-toolbar-height: 44px;
  --os-desktop-bottombar-height: 36px;
  --os-mobile-bottombar-height: 44px;
  --os-scrollbar-width: 15px;
  --os-autofill-edge-length: 8px;
  --os-icon-edge-length: 18px;
  --os-cf-icon-edge-length: 15px;
  --os-error-tooltip-width: 180px;
  --os-bubble-arrow-size: 7px;
  --os-master-chart-height: 60px;
  --os-link-tooltip-width: 220px;
  --os-link-tooltip-height: 32px;
  --os-desktop-menu-item-height: 26px;
  --os-mobile-menu-item-height: 35px;
  --os-menu-item-padding-vertical: 4px;
  --os-menu-item-padding-horizontal: 11px;
  --os-menu-vertical-padding: 6px;
  --os-line-vertical-padding: 1px;
  --os-picker-padding: 8px;
  --os-item-border-width: 1px;
  --os-item-edge-length: 18px;
  --os-items-per-line: 10;
  --os-magnifier-edge: 16px;
  --os-item-gap: 2px;
  --os-color-picker-width: calc(
    (var(--os-items-per-line) * (var(--os-item-edge-length) + (2 * var(--os-item-border-width)))) +
      ((var(--os-items-per-line) - 1) * var(--os-item-gap))
  );
  --os-inner-gradient-width: calc(var(--os-color-picker-width) - (2 * var(--os-item-border-width)));
  --os-inner-gradient-height: calc(
    var(--os-color-picker-width) - 30px - (2 * var(--os-item-border-width))
  );
  --os-container-width: calc(var(--os-color-picker-width) + (2 * var(--os-picker-padding)));
  --os-menu-separator-padding: 5px;

  --os-components-importance-grid: 0;
  --os-components-importance-highlight: 5;
  --os-components-importance-header-grouping-button: 6;
  --os-components-importance-figure: 10;
  --os-components-importance-figure-selected: 11;
  --os-components-importance-scroll-bar: 15;
  --os-components-importance-grid-popover: 19;
  --os-components-importance-grid-composer: 20;
  --os-components-importance-icon-picker: 25;
  --os-components-importance-top-bar-composer: 30;
  --os-components-importance-fullscreen-chart: 34;
  --os-components-importance-popover: 35;
  --os-components-importance-figure-anchor: 1000;
  --os-components-importance-figure-snap-line: 1001;
  --os-components-importance-figure-tooltip: 1002;
}

/* Originates from src/components/validation_messages/validation_messages.css */
.o-spreadsheet {
  .o-validation {
    border-radius: 4px;
    border-width: 0 0 0 3px;
    border-style: solid;
    gap: 3px;

    .o-icon {
      margin-right: 5px;
      height: 1.2em;
      width: 1.2em;
    }
  }

  .o-validation-warning {
    border-color: var(--os-alert-warning-border);
    color: var(--os-alert-warning-text-color);
    background-color: var(--os-alert-warning-bg);
  }

  .o-validation-error {
    border-color: var(--os-alert-danger-border);
    color: var(--os-alert-danger-text-color);
    background-color: var(--os-alert-danger-bg);
  }

  .o-validation-info {
    border-color: var(--os-alert-info-border);
    color: var(--os-alert-info-text-color);
    background-color: var(--os-alert-info-bg);
  }
}

/* Originates from src/components/top_bar/top_bar.css */
.o-spreadsheet {
  @media (max-width: 1200px) {
    .o-topbar-responsive {
      flex-direction: column !important;
    }
  }

  @media (max-width: 768px) {
    .topbar-banner span {
      overflow: auto;
      align-items: normal !important;
    }
  }

  .tool-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .o-topbar-divider {
    width: 0;
    margin: 0 6px;
    height: 30px;
  }

  .o-toolbar-button {
    height: 30px;
  }

  .o-spreadsheet-topbar {
    line-height: 1.2;
    font-size: 14px;
    font-weight: 500;

    .o-topbar-top {
      padding: 2px 10px;

      /* Menus */
      .o-topbar-topleft {
        .o-topbar-menu {
          padding: 4px 6px;
          margin: 0 2px;

          &.active {
            background-color: var(--os-button-active-bg);
            color: var(--os-button-active-text-color);
          }
        }
      }
    }

    .topbar-banner {
      height: var(--os-desktop-topbar-toolbar-height);

      .alert-info {
        border-left: 3px solid var(--os-alert-info-border);
      }
    }

    .o-topbar-composer {
      flex-grow: 1;
    }

    /* Toolbar */
    .o-topbar-toolbar {
      height: var(--os-desktop-topbar-toolbar-height);

      .o-readonly-toolbar {
        background-color: var(--os-gray-100);
        padding-left: 18px;
        padding-right: 18px;
      }

      /* Toolbar */
      .o-toolbar-tools {
        cursor: default;
      }
    }
  }

  &.o-spreadsheet-mobile {
    .o-topbar-toolbar {
      height: var(--os-mobile-topbar-toolbar-height);
    }
    .o-topbar-divider {
      border-width: 2px !important;
      border-radius: 4px;
    }

    .o-toolbar-button {
      height: 35px;
      width: 31px;
      .o-toolbar-button.o-mobile-disabled * {
        color: var(--os-disabled-text-color);
        cursor: not-allowed;
      }
    }
  }
}

/* Originates from src/components/top_bar/dropdown_action/dropdown_action.css */
.o-spreadsheet {
  .o-dropdown {
    position: relative;
    display: flex;
    align-items: center;
  }

  .o-dropdown-content {
    .o-dropdown-line {
      display: flex;

      > span {
        padding: 4px;
      }
    }
  }
}

/* Originates from src/components/text_input/text_input.css */
.o-spreadsheet {
  .os-input {
    border-width: 0 0 1px 0;
    border-color: transparent;
    outline: none;
    text-overflow: ellipsis;
    color: var(--os-text-body);
  }
  .os-input:hover,
  .os-input.o-input-border {
    border-color: var(--os-border-color);
  }
  .os-input:focus {
    border-color: var(--os-action-color);
  }
  .os-input.o-invalid {
    background-color: var(--os-alert-danger-bg);
    border-color: var(--os-alert-danger-border);
  }
  .os-input-error-icon {
    right: 7px;
    top: 4px;
  }
}

/* Originates from src/components/tables/table_styles_popover/table_styles_popover.css */
.o-spreadsheet {
  .o-table-style-popover {
    /* 7 tables preview + padding by line */
    width: calc((66px + 4px * 2) * 7 + 1.5rem * 2);
    font-size: 14px;
    user-select: none;

    .o-notebook {
      border-bottom: 1px solid var(--os-gray-300);

      .o-notebook-tab {
        padding: 5px 15px;
        margin-bottom: -1px;
        margin-left: -1px;
        color: var(--os-text-body);
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s;

        &.selected {
          border-bottom-color: var(--os-white-bg) !important;
          border-top-color: var(--os-primary-button-bg) !important;
          color: var(--os-button-active-text-color);
        }
      }
    }

    .o-table-style-list-item {
      padding: 3px;
    }

    .o-table-style-popover-preview {
      width: 66px;
      height: 51px;
    }

    .o-new-table-style {
      font-size: 36px;
      color: var(--os-text-body-muted);
      &:hover {
        background: var(--os-button-hover-bg);
      }
    }
  }
}

/* Originates from src/components/tables/table_style_preview/table_style_preview.css */
.o-spreadsheet {
  .o-table-style-list-item {
    border: 1px solid transparent;
    border-radius: 4px;
    &.selected {
      border: 1px solid var(--os-action-color);
      background: var(--os-badge-selected-color);
    }

    &:hover {
      background: var(--os-button-hover-bg);
      .o-table-style-edit-button {
        display: block !important;
        right: 0;
        top: 0;
        cursor: pointer;
        padding: 1px 1px 1px 2px;
        .o-icon {
          font-size: 12px;
          width: 12px;
          height: 12px;
        }
      }
    }
  }
}

/* Originates from src/components/tables/table_style_picker/table_style_picker.css */
.o-spreadsheet {
  .o-table-style-picker {
    .o-table-style-picker-arrow {
      &:hover {
        background: var(--os-button-hover-bg);
        cursor: pointer;
      }
    }

    .o-table-style-list-item {
      padding: 5px 6px;
      margin: 5px 2px;

      .o-table-style-picker-preview {
        width: 51px;
        height: 36px;
      }
    }
  }
}

/* Originates from src/components/tables/table_resizer/table_resizer.css */
.o-spreadsheet {
  .o-table-resizer {
    width: 6px;
    height: 6px;
    border-bottom: 3px solid var(--os-gray-500);
    border-right: 3px solid var(--os-gray-500);
    cursor: nwse-resize;
  }
}

/* Originates from src/components/spreadsheet/spreadsheet.css */
.o-spreadsheet {
  .border {
    border: 1px solid var(--os-border-color) !important;
  }

  .border-bottom {
    border-bottom: 1px solid var(--os-border-color) !important;
  }

  .border-top {
    border-top: 1px solid var(--os-border-color) !important;
  }

  .border-start {
    border-left: 1px solid var(--os-border-color) !important;
  }

  .border-end {
    border-right: 1px solid var(--os-border-color) !important;
  }

  color: var(--os-text-body);

  .bg-white {
    background-color: var(--os-white-bg) !important;
  }

  .bg-white-contrasted {
    background-color: light-dark(var(--os-white), var(--os-gray-300));
  }

  select > option {
    background-color: var(--os-white-bg);
  }

  input {
    background-color: transparent;
  }

  &.o-spreadsheet-mobile .o-spreadsheet-topbar-wrapper,
  .o-spreadsheet-bottombar-wrapper {
    box-shadow: 0 0 3px 1px var(--os-gray-400);
  }
  .o-spreadsheet-bottombar-wrapper {
    overscroll-behavior: none;
  }
  position: relative;
  display: grid;
  font-size: 14px;

  .text-muted {
    color: var(--os-text-body-muted) !important;
  }
  .o-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }

  &,
  *,
  *:before,
  *:after {
    /* rtl not supported ATM */
    direction: ltr;
  }
  .o-separator {
    margin-top: var(--os-menu-separator-padding);
    margin-bottom: var(--os-menu-separator-padding);
  }
  .o-hoverable-button {
    border-radius: 2px;
    cursor: pointer;
    .o-icon {
      color: var(--os-text-body);
    }
    &:not(.o-disabled):not(.active):hover {
      background-color: var(--os-button-hover-bg);
      color: var(--os-button-hover-text-color);
      .o-icon {
        color: var(--os-button-hover-text-color);
      }
    }
    &.active {
      background-color: var(--os-button-active-bg);
      color: var(--os-button-active-text-color);
      .o-icon {
        color: var(--os-button-active-text-color);
      }
    }
  }

  .o-grid-container {
    display: grid;
    background-color: var(--os-header-grouping-background-color);

    .o-top-left {
      border: 1px solid var(--os-grid-border-color);
      margin-bottom: -1px;
      margin-right: -1px;
    }

    .o-column-groups {
      grid-column-start: 2;
      border-top: 1px solid var(--os-grid-border-color);
    }

    .o-row-groups {
      grid-row-start: 2;
    }

    .o-group-grid {
      border-top: 1px solid var(--os-grid-border-color);
      border-left: 1px solid var(--os-grid-border-color);
    }
  }

  .o-input {
    min-width: 0px;
    padding: 1px 0;
    width: 100%;
    outline: none;
    border-color: var(--os-border-color);
    color: var(--os-gray-900);

    &::placeholder {
      color: var(--os-composer-placeholder-color);
    }
    &:focus {
      border-color: var(--os-action-color);
    }
  }

  select.o-input {
    cursor: pointer;
    border-width: 0 0 1px 0;
    padding: 1px 6px 1px 0px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%277%27%20height%3D%274%27%20viewBox%3D%270%200%207%204%27%3E%3Cpolygon%20fill%3D%27%23374151%27%20points%3D%273.5%204%207%200%200%200%27/%3E%3C/svg%3E")
      no-repeat right center;
    text-overflow: ellipsis;

    &:disabled {
      color: var(--os-disabled-text-color);
      opacity: 0.4;
      cursor: default;
    }
  }

  .o-input[type="text"] {
    border-width: 0 0 1px 0;
  }

  .o-input[type="number"],
  .o-number-input {
    border-width: 0 0 1px 0;
    /* Remove number input arrows */
    appearance: textfield;
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }

  .o-two-columns {
    grid-column: 1 / 3;
  }

  .o-text-icon {
    vertical-align: middle;
  }

  .o-grid {
    position: relative;
    overflow: hidden;
    background-color: var(--os-background-gray-color);
    &:focus {
      outline: none;
    }

    > canvas {
      box-sizing: content-box;
      border-bottom: 1px solid var(--os-grid-border-color);
      border-right: 1px solid var(--os-grid-border-color);
    }

    .o-grid-overlay {
      position: absolute;
      outline: none;
    }
  }

  .o-button {
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    min-height: 32px;
    line-height: 16px;
    flex-grow: 1;
    background-color: var(--os-button-bg);
    border: 1px solid var(--os-button-bg);
    color: var(--os-text-body);

    &:disabled {
      color: var(--os-disabled-text-color);
    }

    &.primary {
      background-color: var(--os-primary-button-bg);
      border-color: var(--os-primary-button-bg);
      color: var(--os-primary-button-text-color);
      &:hover:enabled {
        color: var(--os-primary-button-text-color);
        background-color: var(--os-primary-button-hover-bg);
      }
      &:active:enabled {
        background-color: var(--os-primary-button-active-bg);
        color: var(--os-primary-button-bg);
      }
      &.o-disabled,
      &:disabled {
        opacity: 0.5;
      }
    }

    &:hover:enabled {
      color: var(--os-button-hover-text-color);
      background-color: var(--os-button-hover-bg);
    }
    &:active:enabled {
      color: var(--os-button-active-text-color);
      background-color: var(--os-button-active-bg);
    }

    &.o-disabled,
    &:disabled {
      opacity: 0.8;
    }

    &.o-button-danger:hover {
      color: var(--os-white);
      background: var(--os-alert-danger-border);
    }
  }

  .o-button-link {
    cursor: pointer;
    text-decoration: none;
    color: var(--os-action-color);
    font-weight: 500;
    &:hover,
    &:active {
      color: var(--os-action-color-hover);
    }
  }

  .o-button-icon {
    cursor: pointer;
    color: var(--os-text-body-muted);
    font-weight: 500;
    &:hover,
    &:active {
      color: var(--os-text-body);
    }
  }

  .o-spreadsheet-bottombar-wrapper {
    z-index: calc(var(--os-components-importance-scroll-bar) + 1);
  }

  .o-checkers-background {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cpath%20fill%3D%22%23d9d9d9%22%20d%3D%22M5%205h5v5H5zH0V0h5%22/%3E%3C/svg%3E");
  }
}

.o-spreadsheet.dark {
  select.o-input {
    background: transparent
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%277%27%20height%3D%274%27%20viewBox%3D%270%200%207%204%27%3E%3Cpolygon%20fill%3D%27%23e4e4e4%27%20points%3D%273.5%204%207%200%200%200%27/%3E%3C/svg%3E")
      no-repeat right center;
  }
}

/* Originates from src/components/small_bottom_bar/small_bottom_bar.css */
.o-spreadsheet .o-spreadsheet-small-bottom-bar {
  background-color: var(--os-background-gray-color);

  .o-selection-button {
    border-radius: 2px;
    background-color: var(--os-gray-200);
    .o-icon {
      width: 24px;
      height: 24px;
      color: var(--os-green-arrow-color);
    }
  }

  .o-small-composer {
    line-height: 26px;
    display: flex;
    z-index: var(--os-components-importance-top-bar-composer);
  }

  .bottom-bar-menu {
    background-color: var(--os-background-gray-color);
  }

  .o-spreadsheet-bottom-bar {
    border: none;
  }

  .o-composer {
    overscroll-behavior: contain;
  }

  .o-composer-assistant-container {
    transform: translateY(calc(-26px - 100%));
  }

  .o-spreadsheet-editor-symbol {
    height: 33px;
    cursor: pointer;
    user-select: none;
  }
}

/* Originates from src/components/small_bottom_bar/ribbon_menu/ribbon_menu.css */
.o-spreadsheet .o-ribbon-menu {
  height: 250px;

  .o-ribbon-title {
    background-color: color-mix(in srgb, var(--os-background-gray-color), white 5%);
    border-bottom: 2px solid var(--os-gray-200);
  }
  .o-previous-button {
    background-color: var(--os-background-gray-color);
  }
  .o-ribbon-menu-wrapper {
    max-height: 100%;

    &.scroll-top::before {
      width: 100%;
      height: 15px;
      content: "";
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent);
      position: absolute;
      pointer-events: none;
    }

    &.scroll-bottom::after {
      width: 100%;
      height: 15px;
      content: "";
      background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
      position: absolute;
      pointer-events: none;
      z-index: 1;
      bottom: 0;
    }
  }
  .o-menu-item {
    height: 40px;
  }
}

/* Originates from src/components/side_panel/table_style_editor_panel/table_style_editor_panel.css */
.o-spreadsheet {
  .o-table-style-editor-panel {
    .o-table-style-list-item {
      margin: 2px 7px;
      padding: 6px 9px;
      .o-table-style-edit-template-preview {
        width: 71px;
        height: 51px;
      }
    }
  }
}

/* Originates from src/components/side_panel/table_panel/table_panel.css */
.o-spreadsheet {
  .o-table-panel {
    input.o-table-n-of-headers {
      width: 14px;
      text-align: center;
    }
    .o-info-icon {
      width: 14px;
      height: 14px;
    }
  }
}

/* Originates from src/components/side_panel/side_panel/side_panel.css */
.o-spreadsheet {
  .o-sidePanel {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    user-select: none;
    color: var(--os-text-body);
    &.collapsed {
      padding: 8px;
      cursor: pointer;
      .o-sidePanelTitle {
        writing-mode: vertical-rl;
        text-orientation: mixed;
      }
    }
    .o-sidePanelTitle {
      line-height: 20px;
      font-size: 16px;
    }
    .o-sidePanelHeader {
      padding: 8px;
    }
    .o-sidePanelAction {
      padding: 5px 10px;
      cursor: pointer;
      &.active {
        background-color: var(--os-button-active-bg);
      }
      &:hover {
        background-color: var(--os-button-hover-bg);
      }
    }
    .o-sidePanelBody-container {
      min-height: 0;
    }
    .o-sidePanelBody {
      overflow: auto;
      width: 100%;
      height: 100%;
      .o-section {
        padding: 16px;
        .o-section-title {
          font-weight: 500;
          margin-bottom: 5px;
        }
        .o-section-subtitle {
          font-weight: 500;
          font-size: 13px;
          line-height: 14px;
          margin: 8px 0 4px 0;
        }
        .o-subsection-left {
          display: inline-block;
          width: 47%;
          margin-right: 3%;
        }
        .o-subsection-right {
          display: inline-block;
          width: 47%;
          margin-left: 3%;
        }
      }

      .o-sidePanel-composer {
        color: var(--os-text-body);
      }
    }

    .o-sidePanelButtons {
      display: flex;
      gap: 8px;
    }

    .o-sidePanel-handle-container {
      width: 8px;
      position: fixed;
      top: 50%;
      z-index: 1;
    }
    .o-sidePanel-handle {
      cursor: col-resize;
      color: var(--os-gray-500);
      .o-icon {
        height: 25px;
        margin-left: -5px;
      }
    }

    .o-sidePanel-tab {
      padding: 8px 0px;
      cursor: pointer;
      border-right: 1px solid var(--os-border-color);

      &.inactive {
        color: var(--os-text-body);
        background-color: var(--os-gray-100);
        border-bottom: 1px solid var(--os-border-color);
      }

      &:not(.inactive) {
        color: var(--os-button-active-text-color);
        border-bottom: 1px solid transparent;
      }
    }
    .o-sidePanel-tab:last-child {
      border-right: none;
    }
  }

  .o-fw-bold {
    font-weight: 500;
  }
}

/* Originates from src/components/side_panel/settings/settings_panel.css */
.o-spreadsheet {
  .o-locale-preview {
    background-color: light-dark(var(--os-gray-100), var(--os-gray-300));
  }
}

/* Originates from src/components/side_panel/remove_duplicates/remove_duplicates.css */
.o-spreadsheet {
  .o-checkbox-selection {
    max-height: 300px;
  }
}

/* Originates from src/components/side_panel/pivot/pivot_side_panel/pivot_design_panel/pivot_design_panel.css */
.o-spreadsheet {
  .o-pivot-design {
    .row {
      height: 24px;
    }
  }
}

/* Originates from src/components/side_panel/pivot/pivot_measure_display_panel/pivot_measure_display_panel.css */
.o-spreadsheet {
  .o-sidePanel {
    .o-pivot-measure-display-field,
    .o-pivot-measure-display-value {
      border-radius: 3px;
    }

    .o-pivot-measure-display-description {
      white-space: pre-wrap;
      color: dimgray;
      border-left-width: 2px !important;
    }
  }
}

/* Originates from src/components/side_panel/pivot/pivot_layout_configurator/pivot_layout_configurator.css */
.o-spreadsheet {
  .add-calculated-measure {
    cursor: pointer;
  }
}

/* Originates from src/components/side_panel/pivot/pivot_layout_configurator/pivot_sort_section/pivot_sort_section.css */
.o-spreadsheet {
  .o-pivot-sort {
    .o-sort-card {
      width: fit-content;
      background-color: var(--os-gray-100);

      .o-sort-value {
        color: var(--os-primary-button-bg);
      }
    }
  }
}

/* Originates from src/components/side_panel/pivot/pivot_layout_configurator/pivot_dimension/pivot_dimension.css */
.o-spreadsheet {
  .pivot-dimension {
    background-color: light-dark(var(--os-white), var(--os-gray-300));

    select.o-input {
      height: inherit;
    }

    .pivot-dim-operator-label {
      min-width: 120px;
    }

    &.pivot-dimension-invalid {
      background-color: var(--os-alert-danger-bg);
      border-color: var(--os-alert-danger-border) !important;
      input {
        background-color: transparent;
      }
    }
  }
}

/* Originates from src/components/side_panel/pivot/pivot_layout_configurator/add_dimension_button/add_dimension_button.css */
.o-spreadsheet {
  input.pivot-dimension-search-field:focus {
    outline: none;
  }
  .pivot-dimension-search-field-icon svg {
    width: 13px;
    height: 13px;
  }
  .add-dimension.o-button {
    padding: 2px 7px;
    font-weight: 400;
    font-size: 12px;
    flex-grow: 0;
    height: inherit;
  }
}

/* Originates from src/components/side_panel/pivot/pivot_defer_update/pivot_defer_update.css */
.o-spreadsheet {
  .pivot-defer-update {
    min-height: 40px;
  }
}

/* Originates from src/components/side_panel/pivot/pivot_custom_groups_collapsible/pivot_custom_groups_collapsible.css */
.o-spreadsheet .o-pivot-custom-groups {
  .o_side_panel_collapsible_title {
    font-size: 13px !important;
    padding: 4px 0 4px 0 !important;

    .collapsor > div {
      padding-left: 2px !important;
    }

    .collapsor-arrow {
      transform-origin: 5px 7px;
      .o-icon {
        width: 10px;
        height: 14px;
      }
    }
  }

  .os-collapse > div {
    padding: 0 !important;
  }
}

/* Originates from src/components/side_panel/more_formats/more_formats.css */
.o-spreadsheet {
  .o-more-formats-panel {
    .o-format-proposals {
      max-height: 320px;
      font-size: 12px;
    }

    .o-format-examples {
      background: light-dark(var(--os-gray-100), var(--os-gray-300));
    }

    table {
      table-layout: fixed;
    }

    .format-preview {
      height: 26px;
      cursor: pointer;

      &.active,
      &:hover {
        background-color: var(--os-background-gray-color-hover) !important;
      }

      &.active:hover {
        background-color: rgba(0, 0, 0, 0.12);
      }
    }
  }
}

/* Originates from src/components/side_panel/find_and_replace/find_and_replace.css */
.o-spreadsheet {
  .o-find-and-replace {
    outline: none;
    height: 100%;
    .o-input-search-container {
      display: flex;
      .o-input-with-count {
        flex-grow: 1;
        width: auto;
      }
      .o-input-without-count {
        width: 100%;
      }
      .o-input-count {
        width: fit-content;
        padding: 4px 0 4px 4px;
        white-space: nowrap;
      }
    }
    .o-result-buttons {
      .o-button {
        height: 19px;
        width: 19px;
        box-sizing: content-box;
        .o-icon {
          height: 14px;
          width: 14px;
        }
      }
    }
  }
}

/* Originates from src/components/side_panel/data_validation/dv_preview/dv_preview.css */
.o-spreadsheet {
  .o-sidePanel {
    .o-dv-preview {
      height: 70px;
      cursor: pointer;

      .o-dv-container {
        min-width: 0; /* otherwise flex won't shrink correctly */
      }

      .o-dv-preview-description {
        font-size: 13px;
      }

      &:hover {
        background-color: var(--os-background-gray-color-hover);
      }

      &:not(:hover) .o-dv-preview-delete {
        display: none !important;
      }
    }
  }
}

/* Originates from src/components/side_panel/criterion_form/criterion_input/criterion_input.css */
.o-spreadsheet {
  .o-dv-input {
    &.o-invalid {
      background-color: var(--os-alert-danger-bg);
    }
    .error-icon {
      right: 7px;
      top: 7px;
    }
  }
}

/* Originates from src/components/side_panel/conditional_formatting/cf_preview/cf_preview.css */
.o-spreadsheet {
  .o-cf-preview {
    &.o-cf-cursor-ptr {
      cursor: pointer;
    }

    height: 80px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    &:hover,
    &.o-cf-dragging {
      background-color: var(--os-gray-200);
    }

    &:not(:hover) .o-cf-delete-button {
      display: none;
    }
    .o-cf-preview-icon {
      height: 50px;
      width: 50px;
      .o-icon {
        width: var(--os-cf-icon-edge-length);
        height: var(--os-cf-icon-edge-length);
      }
    }
    .o-cf-preview-description {
      .o-cf-preview-description-rule {
        margin-bottom: 4px;
        max-height: 2.8em;
        line-height: 1.4em;
      }
      .o-cf-preview-range {
        font-size: 12px;
      }
    }
    &:not(:hover):not(.o-cf-dragging) .o-cf-drag-handle {
      display: none !important;
    }
    .o-cf-drag-handle {
      left: 2px;
      cursor: move;
      .o-icon {
        width: 6px;
        height: 30px;
      }
    }

    .o-icon.arrow-down {
      color: var(--os-red-arrow-color);
    }
    .o-icon.arrow-up {
      color: var(--os-green-arrow-color);
    }
  }
}

/* Originates from src/components/side_panel/conditional_formatting/cf_editor/cf_editor.css */
.o-spreadsheet {
  .o-cf-ruleEditor {
    .o-cf-preview-display {
      padding: 10px;
    }

    .o-cf-cell-is-rule {
      .o-divider {
        margin: 4px 6px;
      }
    }
    .o-cf-color-scale-editor {
      .o-threshold {
        .o-select-with-input {
          max-width: 150px;
        }
        .o-threshold-value {
          flex-grow: 1;
          flex-basis: 60%;
          min-width: 0px; /* input overflows in Firefox otherwise */
        }
      }
    }
    .o-cf-iconset-rule {
      .o-cf-clickable-icon {
        cursor: pointer;
        &:hover {
          border-color: var(--os-action-color) !important;
          background-color: var(--os-badge-selected-color);
        }
        .o-icon {
          width: var(--os-cf-icon-edge-length);
          height: var(--os-cf-icon-edge-length);
        }
      }
      .o-cf-iconsets {
        gap: 11px;
        .o-cf-iconset {
          padding: 7px 8px;
          width: 95px;
          .o-icon {
            margin: 0 3px;
          }
          svg {
            vertical-align: baseline;
          }
        }
      }
      .o-inflection {
        .o-cf-icon-button {
          padding: 4px 10px;
        }
        table {
          font-size: 13px;
          td {
            padding: 6px 0;
          }

          th.o-cf-iconset-icons {
            width: 25px;
          }
          th.o-cf-iconset-text {
            width: 82px;
          }
          th.o-cf-iconset-operator {
            width: 20px;
          }
          .o-cf-iconset-type {
            min-width: 80px;
          }
        }
      }
    }

    .o-icon.arrow-down {
      color: var(--os-red-arrow-color);
    }
    .o-icon.arrow-up {
      color: var(--os-green-arrow-color);
    }
  }
}

/* Originates from src/components/side_panel/components/round_color_picker/round_color_picker.css */
.o-spreadsheet {
  .o-round-color-picker-button {
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-position: 1px 1px;
  }
}

/* Originates from src/components/side_panel/components/radio_selection/radio_selection.css */
.o-spreadsheet {
  .o-radio {
    input {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 14px;
      height: 14px;
      outline: none;
      flex-shrink: 0;

      &:checked {
        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%27-4%20-4%208%208%27%3E%3Ccircle%20r%3D%222%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E");
        background-color: var(--os-action-color);
        border-color: var(--os-action-color) !important;
      }
    }
  }
}

.o-spreadsheet.dark {
  .o-radio input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
  }
}

/* Originates from src/components/side_panel/components/collapsible/side_panel_collapsible.css */
.o-spreadsheet {
  .o_side_panel_collapsible_title {
    font-size: 16px;
    cursor: pointer;
    padding: 6px 0px 6px 6px !important;
    .collapsor-arrow {
      transform: rotate(-90deg);
      display: inline-block;
      transform-origin: 8px 11px;
      transition: transform 0.2s ease-in-out;
      .o-icon {
        width: 16px;
        height: 22px;
      }
    }
    .collapsor:not(.collapsed) .collapsor-arrow {
      transform: rotate(0);
    }
    .collapsor {
      width: 100%;
      transition-delay: 0.35s;
      transition-property: all;
    }
  }
}

/* Originates from src/components/side_panel/components/checkbox/checkbox.css */
.o-spreadsheet {
  label.o-checkbox {
    input {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      border-radius: 0;
      width: 14px;
      height: 14px;
      vertical-align: top;
      outline: none;
      cursor: pointer;

      &:hover {
        border-color: var(--os-action-color);
      }

      &:checked {
        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%23FFF%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%273%27%20d%3D%27m6%2010%203%203%206-6%27/%3E%3C/svg%3E");
        background-color: var(--os-action-color);
        border-color: var(--os-action-color);
      }

      &:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(113, 75, 103, 0.25);
        border-color: var(--os-action-color);
      }
    }
  }
}

.o-spreadsheet.dark {
  label.o-checkbox input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  }
}

/* Originates from src/components/side_panel/components/badge_selection/badge_selection.css */
.o-spreadsheet {
  .o-badge-selection {
    gap: 1px;
    button.o-button {
      border-radius: 0;
      &.selected {
        color: var(--os-gray-900);
        border-color: var(--os-action-color);
        background: var(--os-badge-selected-color);
        font-weight: 600;
      }

      &:first-child {
        border-radius: 4px 0 0 4px;
      }
      &:last-child {
        border-radius: 0 4px 4px 0;
      }
    }
  }
}

/* Originates from src/components/side_panel/chart/gauge_chart_panel/gauge_chart_design_panel.css */
.o-spreadsheet {
  .o-gauge-color-set {
    table {
      table-layout: fixed;
      margin-top: 2%;
      display: table;
      text-align: left;
      font-size: 12px;
      line-height: 18px;
      width: 100%;
      font-size: 12px;
    }

    td {
      height: 30px;
      padding: 6px 0;
    }
    th.o-gauge-color-set-colorPicker {
      width: 8%;
    }
    th.o-gauge-color-set-text {
      width: 25%;
    }
    th.o-gauge-color-set-operator {
      width: 10%;
    }
    th.o-gauge-color-set-value {
      width: 22%;
    }
    th.o-gauge-color-set-type {
      width: 30%;
    }
    input,
    select {
      width: 100%;
      height: 100%;
    }
  }
}

/* Originates from src/components/side_panel/chart/chart_type_picker/chart_type_picker.css */
.o-spreadsheet {
  .o-section .o-input.o-type-selector {
    height: 30px;
    padding-left: 35px;
    padding-top: 5px;
  }
  .o-type-selector-preview {
    left: 5px;
    top: 3px;
    .o-chart-preview {
      width: 24px;
      height: 24px;
    }
  }

  .o-popover .o-chart-select-popover {
    .o-chart-type-item {
      cursor: pointer;
      padding: 3px 6px;
      margin: 1px 2px;
      &.selected,
      &:hover {
        border: 1px solid var(--os-action-color);
        background: var(--os-badge-selected-color);
        padding: 2px 5px;
      }
      .o-chart-preview {
        width: 48px;
        height: 48px;
      }
    }
  }
}

/* Originates from src/components/side_panel/chart/building_blocks/text_styler/text_styler.css */
.o-spreadsheet {
  .o-chart-title-designer {
    .o-hoverable-button {
      height: 30px;
    }
    .o-dropdown-content .o-hoverable-button {
      height: fit-content;
    }

    .o-divider {
      margin: 0px 4px;
      height: 14px;
    }

    .o-dropdown-content {
      overflow-y: auto;
      overflow-x: hidden;
      padding: 2px;
      z-index: 100;
      box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);

      .o-dropdown-line {
        > span {
          padding: 4px;
        }
      }
    }
  }
}

/* Originates from src/components/side_panel/chart/building_blocks/pie_hole_size/pie_hole_size.css */
.o-spreadsheet .o-sidePanel {
  .o-pie-hole-size-input {
    width: 40px;
  }
}

/* Originates from src/components/side_panel/chart/building_blocks/color_scale/color_scale_picker.css */
.o-spreadsheet {
  .color-scale-container {
    margin: 0px;
    padding: 5px;
    cursor: pointer;
  }
  .color-scale-label {
    margin-right: 10px;
  }
  .color-scale-preview {
    height: 20px;
    border: 1px solid #d8dadd;
  }
  .custom-color-scale-container {
    padding-bottom: 5px;
    border-bottom: 1px solid #d8dadd;
  }
  .o-popover-content {
    .color-scale-container {
      &:hover {
        background-color: var(--os-badge-selected-color);
      }
    }
  }
}

/* Originates from src/components/side_panel/chart/building_blocks/chart_title/chart_title.css */
.o-spreadsheet {
  .o-chart-title-designer {
    > span {
      height: 30px;
    }
  }
}

/* Originates from src/components/side_panel/carousel_panel/carousel_panel.css */
.o-spreadsheet .o-carousel-panel {
  .o-carousel-preview {
    height: 60px;
    border-left: 5px solid transparent;

    &:not(:hover):not(.o-dragging) .o-drag-handle {
      display: none !important;
    }

    &.o-selected {
      border-color: var(--os-primary-button-bg);
    }

    .o-drag-handle {
      cursor: move;

      .o-icon {
        width: 6px;
        height: 30px;
      }
    }

    .o-carousel-preview-icon {
      width: 48px;
      height: 48px;

      .o-icon {
        width: 36px;
        height: 36px;
      }
    }
  }
}

/* Originates from src/components/selection_input/selection_input.css */
.o-spreadsheet {
  .o-selection {
    .o-selection-input {
      padding: 2px 0px;

      input.o-invalid {
        background-color: var(--os-alert-danger-bg);
      }
      .input-icon {
        right: 7px;
        top: 4px;
      }
      .o-drag-handle {
        cursor: move;
      }
    }
    .o-disabled-ranges {
      color: var(--os-disabled-text-color) !important;
    }
    .o-button {
      flex-grow: 0;
    }

    /* Make the character a bit bigger
    compared to its neighbor INPUT box  */
    .o-remove-selection {
      font-size: calc(100% + 4px);
    }
  }
}

/* Originates from src/components/scrollbar/scrollbar.css */
.o-spreadsheet {
  .o-scrollbar {
    position: absolute;
    overflow: auto;
    z-index: var(--os-components-importance-scroll-bar);
    background-color: var(--os-background-gray-color);
    &.corner {
      box-sizing: content-box;
      right: 0px;
      bottom: 0px;
      height: var(--os-scrollbar-width);
      width: var(--os-scrollbar-width);
    }
  }
}

/* Originates from src/components/popover/popover.css */
.o-spreadsheet {
  .o-popover {
    position: absolute;
    z-index: var(--os-components-importance-popover);
    overflow: auto;
    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
    width: fit-content;
    height: fit-content;
  }
}

.o-spreadsheet.dark {
  .o-popover {
    border: 1px solid var(--os-border-color);
  }
}

/* Originates from src/components/pivot_html_renderer/pivot_html_renderer.css */
.o-spreadsheet {
  .o_pivot_html_renderer {
    width: 100%;
    border-collapse: collapse;

    &:hover {
      cursor: pointer;
    }

    td,
    th {
      border: 1px solid var(--os-border-color);
      background-color: var(--os-white-bg);
      padding: 0.3rem;
      white-space: nowrap;

      &:hover {
        filter: brightness(0.9);
      }
    }

    td {
      text-align: right;
    }

    th {
      background-color: var(--os-background-gray-color);
      font-weight: bold;
      color: var(--os-black);
    }

    .o_missing_value {
      color: var(--os-gray-600);
      background: var(--os-button-active-bg);
    }
  }
}

/* Originates from src/components/number_editor/number_editor.css */
.o-spreadsheet {
  .o-number-editor {
    width: max-content !important;

    input.o-font-size {
      outline: none;
      height: 20px;
      width: 31px;
      text-align: center;
    }
  }
  .o-text-options > div {
    cursor: pointer;
    line-height: 26px;
    padding: 3px 12px;
    &:hover {
      background-color: var(--os-background-gray-color-hover);
    }
  }
}

/* Originates from src/components/menu_popover/menu_popover.css */
.o-spreadsheet {
  .o-menu-wrapper {
    padding: var(--os-menu-vertical-padding) 0px;
  }
}

/* Originates from src/components/menu/menu.css */
.o-spreadsheet {
  .o-menu {
    user-select: none;
    .o-menu-item {
      cursor: pointer;
      user-select: none;
      height: var(--os-desktop-menu-item-height);
      padding: var(--os-menu-item-padding-vertical) var(--os-menu-item-padding-horizontal);
      .o-menu-item-icon {
        width: calc(var(--os-desktop-menu-item-height) - 2 * var(--os-menu-item-padding-vertical));
        line-height: calc(
          var(--os-desktop-menu-item-height) - 2 * var(--os-menu-item-padding-vertical)
        );
      }
      & {
        &:hover,
        &.o-menu-item-active {
          background-color: var(--os-button-active-bg);
          color: var(--os-button-active-text-color);
        }
        .o-menu-item-icon {
          .o-icon {
            color: var(--os-icons-color);
          }
        }
        .o-menu-item-description {
          color: grey;
        }
      }
      &.disabled {
        &,
        .o-menu-item-description {
          color: var(--os-disabled-text-color);
        }
      }
      .o-menu-item-name {
        min-width: 40%;
      }
      .o-menu-item-icon {
        display: inline-block;
        margin: 0px 8px 0px 0px;
      }
    }
  }
  &.o-spreadsheet-mobile {
    .o-menu-item {
      height: var(--os-mobile-menu-item-height);
    }
  }
}

/* Originates from src/components/link/link_editor/link_editor.css */
.o-spreadsheet {
  .o-link-editor {
    font-size: 13px;
    box-shadow: 0 1px 4px 3px rgba(60, 64, 67, 0.15);
    padding: 12px;
    display: flex;
    flex-direction: column;
    width: calc(340 + 2 * 12) px;

    .o-section {
      .o-section-title {
        font-weight: bold;
        margin-bottom: 5px;
      }
    }
    .o-buttons {
      padding-left: 16px;
      padding-top: 16px;
      text-align: right;
    }
    input.o-input {
      width: 100%;
      padding: 0 23px 4px 0;
    }
    .o-link-url {
      position: relative;
      flex-grow: 1;
      button {
        position: absolute;
        right: 0px;
        top: 0px;
        border: none;
        height: 20px;
        width: 20px;
        background-color: var(--os-white-bg);
        margin: 2px 3px 1px 0px;
        padding: 0px 1px 0px 0px;
      }
      button:hover {
        cursor: pointer;
      }
    }
  }
}

/* Originates from src/components/link/link_display/link_display.css */
.o-spreadsheet {
  .o-link-tool {
    font-size: 13px;
    box-shadow: 0 1px 4px 3px rgba(60, 64, 67, 0.15);
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    height: var(--os-link-tooltip-height);
    width: var(--os-link-tooltip-width);

    img {
      margin-right: 3px;
      width: 16px;
      height: 16px;
    }

    a.o-link {
      color: var(--os-link-color);
      text-decoration: none;
      flex-grow: 2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    a.o-link:hover {
      text-decoration: none;
      color: var(--os-link-hover-color);
      cursor: pointer;
    }
  }
  .o-link-icon {
    float: right;
    padding-left: 5px;
    .o-icon {
      height: 16px;
    }
  }
  .o-link-icon .o-icon {
    height: 13px;
  }
  .o-link-icon:hover {
    cursor: pointer;
    color: var(--os-black);
  }
}

/* Originates from src/components/icons/icons.css */
.o-spreadsheet {
  .o-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: var(--os-icon-edge-length);
    height: var(--os-icon-edge-length);
    font-size: var(--os-icon-edge-length);
    .small-text {
      font: bold 9px sans-serif;
    }
    .heavy-text {
      font: bold 16px sans-serif;
    }
  }
  .fa-small {
    font-size: 14px;
  }

  .o-icon.fx-icon {
    color: var(--os-composer-placeholder-color);
  }
}

/* Originates from src/components/icon_picker/icon_picker.css */
.o-spreadsheet {
  .o-icon-picker {
    position: absolute;
    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
    padding: 2px 1px;
    z-index: var(--os-components-importance-icon-picker);
  }
  .o-cf-icon-line {
    display: flex;
    padding: 0 6px;
  }
  .o-icon-picker-item {
    cursor: pointer;
    &:hover {
      background-color: var(--os-badge-selected-color);
      outline: var(--os-action-color) solid 1px;
    }
  }
}

/* Originates from src/components/highlight/highlight/highlight.css */
.o-spreadsheet {
  .o-highlight {
    z-index: var(--os-components-importance-highlight);
  }
}

/* Originates from src/components/highlight/corner/corner.css */
.o-spreadsheet {
  .o-corner {
    position: absolute;
  }

  .o-corner-button {
    border: 1px solid white;
    height: var(--os-autofill-edge-length);
    width: var(--os-autofill-edge-length);
  }
  .o-corner-nw,
  .o-corner-se {
    &:hover {
      cursor: nwse-resize;
    }
  }
  .o-corner-ne,
  .o-corner-sw {
    &:hover {
      cursor: nesw-resize;
    }
  }
  .o-resizing {
    cursor: grabbing;
  }
}

/* Originates from src/components/highlight/border/border.css */
.o-spreadsheet {
  .o-border {
    position: absolute;
    &:hover {
      cursor: grab;
    }
  }
  .o-moving {
    cursor: grabbing;
  }
}

/* Originates from src/components/headers_overlay/headers_overlay.css */
.o-spreadsheet {
  .o-col-resizer {
    position: absolute;
    top: 0;
    left: var(--os-header-width);
    right: var(--os-scrollbar-width);
    height: var(--os-header-height);
    width: calc(100% - var(--os-header-width) + var(--os-scrollbar-width));
    &.o-dragging {
      cursor: grabbing;
    }
    &.o-grab {
      cursor: grab;
    }
    .dragging-col-line {
      top: var(--os-header-height);
      position: absolute;
      width: 2px;
      height: 10000px;
      background-color: black;
    }
    .dragging-col-shadow {
      top: var(--os-header-height);
      position: absolute;
      height: 10000px;
      background-color: black;
      opacity: 0.1;
    }
    .o-handle {
      position: absolute;
      height: var(--os-header-height);
      width: 4px;
      cursor: e-resize;
      background-color: var(--os-selection-border-color);
    }
    .dragging-resizer {
      top: var(--os-header-height);
      position: absolute;
      margin-left: 2px;
      width: 1px;
      height: 10000px;
      background-color: var(--os-selection-border-color);
    }
    .o-unhide:hover {
      z-index: calc(var(--os-components-importance-grid) + 1);
      background-color: var(--os-gray-400);
    }
  }

  .o-row-resizer {
    position: absolute;
    top: var(--os-header-height);
    left: 0;
    bottom: var(--os-scrollbar-width);
    width: var(--os-header-width);
    &.o-dragging {
      cursor: grabbing;
    }
    &.o-grab {
      cursor: grab;
    }
    .dragging-row-line {
      left: var(--os-header-width);
      position: absolute;
      width: 10000px;
      height: 2px;
      background-color: black;
    }
    .dragging-row-shadow {
      left: var(--os-header-width);
      position: absolute;
      width: 10000px;
      background-color: black;
      opacity: 0.1;
    }
    .o-handle {
      position: absolute;
      height: 4px;
      width: var(--os-header-width);
      cursor: n-resize;
      background-color: var(--os-selection-border-color);
    }
    .dragging-resizer {
      left: var(--os-header-width);
      position: absolute;
      margin-top: 2px;
      width: 10000px;
      height: 1px;
      background-color: var(--os-selection-border-color);
    }
    .o-unhide:hover {
      z-index: calc(var(--os-components-importance-grid) + 1);
      background-color: var(--os-gray-400);
    }
  }

  .o-overlay {
    .all {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: var(--os-header-width);
      height: var(--os-header-height);
    }
  }
}

/* Originates from src/components/header_group/header_group_container.css */
.o-spreadsheet {
  .o-header-group-frozen-pane-border {
    &.o-group-rows {
      margin-top: -1px;
      border-bottom: 3px solid var(--os-frozen-pane-header-border-color);
    }
    &.o-group-columns {
      margin-left: -1px;
      border-right: 3px solid var(--os-frozen-pane-header-border-color);
    }
  }

  .o-header-group-main-pane {
    &.o-group-rows {
      margin-top: -2px; /* Counteract o-header-group-frozen-pane-border offset */
    }
    &.o-group-columns {
      margin-left: -2px;
    }
  }
}

/* Originates from src/components/header_group/header_group.css */
.o-spreadsheet {
  .o-header-group {
    .o-header-group-header {
      z-index: var(--os-components-importance-header-grouping-button);
      .o-group-fold-button {
        cursor: pointer;
        width: 15px;
        height: 15px;
        border: 1px solid var(--os-gray-500);
        .o-icon {
          width: 7px;
          height: 7px;
        }

        &:hover {
          border-color: var(--os-gray-600);
        }
      }
    }

    .o-group-border {
      border-color: var(--os-background-gray-color);
    }
  }
}

/* Originates from src/components/grid_popover/grid_popover.css */
.o-spreadsheet {
  .o-popover {
    &.o-popover-grid-index {
      z-index: var(--os-components-importance-grid-popover);
    }
  }
}

/* Originates from src/components/grid_overlay/grid_overlay.css */
.o-spreadsheet {
  .o-paint-format-cursor {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='14' height='16'%3E%3Cpath d='M6.5.4c1.3-.8 2.9-.1 3.8 1.4l2.9 5.1c.2.4.9 1.6-.4 2.3l-1.6.9 1.8 3.1c.2.4.1 1-.2 1.2l-1.6 1c-.3.1-.9 0-1.1-.4l-1.8-3.1-1.6 1c-.6.4-1.7 0-2.2-.8L0 4.3'/%3E%3Cpath fill='#fff' d='M9.1 2a1.4 1.1 60 0 0-1.7-.6L5.5 2.5l.9 1.6-1 .6-.9-1.6-.6.4 1.8 3.1-1.3.7-1.8-3.1-1 .6 3.8 6.6 6.8-3.98M3.9 8.8 10.82 5l.795 1.4-6.81 3.96'/%3E%3C/svg%3E"),
      auto;
  }
}

/* Originates from src/components/grid_add_rows_footer/grid_add_rows_footer.css */
.o-spreadsheet {
  .o-grid-add-rows {
    color-scheme: light;
    color: var(--os-text-body);
    input.o-input {
      width: 60px;
      height: 30px;
    }
    .o-validation-error {
      display: inline-block !important;
      margin-top: 0;
      margin-left: 8px;
    }
  }
}

/* Originates from src/components/full_screen_figure/full_screen_figure.css */
.o-spreadsheet {
  .o-fullscreen-figure-overlay {
    z-index: var(--os-components-importance-fullscreen-chart);
    background-color: rgba(0, 0, 0, 0.4);
    padding: 60px;

    .o-figure:not(:hover) .o-dashboard-chart-select {
      display: block !important;
    }
  }
}

/* Originates from src/components/filters/filter_menu_value_list/filter_menu_value_list.css */
.o-spreadsheet .o-filter-menu {
  .o-search-icon {
    right: 5px;
    top: 3px;
    opacity: 0.4;

    svg {
      height: 16px;
      width: 16px;
      vertical-align: middle;
    }
  }

  .o-filter-menu-actions {
    display: flex;
    flex-direction: row;
    margin-bottom: 4px;
  }

  .o-filter-menu-list {
    flex: auto;
    overflow-y: auto;
    height: 130px;
  }
}

/* Originates from src/components/filters/filter_menu/filter_menu.css */
.o-spreadsheet {
  .o-filter-menu {
    width: 245px;
    padding: 8px 0;
    user-select: none;

    .o-filter-menu-content {
      padding: 0 16px;
    }

    .o-sort-item {
      padding-left: 34px;
    }

    .o_side_panel_collapsible_title {
      font-size: inherit;
      padding: 0 0 4px 0 !important;
      font-weight: 400 !important;

      .collapsor .o-icon {
        opacity: 0.8;
      }

      .collapsor-arrow {
        transform-origin: 6px 8px;

        .o-icon {
          width: 12px;
          height: 16px;
        }
      }
    }

    .o-filter-menu-item {
      display: flex;
      cursor: pointer;
      user-select: none;
      line-height: 1;

      &.selected,
      &:hover {
        background-color: var(--os-button-active-bg);
      }
    }

    .o-filter-menu-buttons {
      margin-top: 9px;

      .o-button {
        height: 26px;
      }
    }
  }
}

/* Originates from src/components/figures/figure_container/figure_container.css */
.o-spreadsheet {
  .o-figure-snap-line {
    position: relative;
    z-index: var(--os-components-importance-figure-snap-line);
    &.vertical {
      width: 0px;
      border-left: 1px dashed black;
    }
    &.horizontal {
      border-top: 1px dashed black;
      height: 0px;
    }
  }
  .o-figure-container {
    -webkit-user-select: none; /* safari */
    user-select: none;
  }
  .o-figure.o-add-to-carousel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    z-index: 5;
    pointer-events: none;
  }

  .o-figure.o-add-to-carousel::after {
    content: "+";
    position: absolute;
    top: calc(50% - 15px);
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
    color: rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    z-index: 10;
    pointer-events: none;
    font-weight: bold;
  }
}

/* Originates from src/components/figures/figure_carousel/figure_carousel.css */
.o-spreadsheet {
  .o-carousel-content {
    height: 0; /* To make flex-fill work */
  }

  .o-carousel-empty {
    background-color: #ffffff;

    .o-icon {
      width: 50%;
      height: 50%;
      color: var(--os-gray-400);
    }
  }

  .o-carousel-header {
    z-index: 1;

    overflow: hidden;
    padding-left: 4px; /* Align with MIN_CELL_TEXT_MARGIN */

    border: 1px solid transparent;

    &.o-carousel-header-floating {
      border: 1px solid var(--os-figure-border-color);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .o-carousel-title {
      max-width: 60%;
    }

    .o-carousel-tabs {
      width: 0; /* To make flex-fill work */
    }

    .o-carousel-button {
      cursor: pointer;

      &.o-carousel-tabs-dropdown {
        font-size: 16px;
        line-height: 16px;
      }

      &.o-carousel-full-screen-button {
        margin: 1px;
      }

      &.o-carousel-menu-button {
        padding: 3px 5px;
      }

      &.active,
      &:hover {
        background-color: var(--os-button-hover-bg);
        color: var(--os-button-hover-text-color);
      }
    }

    .o-carousel-tab {
      cursor: pointer;
      max-width: 150px;
      font-size: 14px;

      &:hover {
        color: var(--os-primary-button-bg);
      }

      &.selected {
        color: var(--os-primary-button-bg);
        font-weight: 600;
      }
    }
  }
}

/* Originates from src/components/figures/figure/figure.css */
.o-spreadsheet {
  div.o-figure {
    color-scheme: light;
    color: var(--os-text-body);

    position: absolute;
    width: 100%;
    height: 100%;
    user-select: none;

    &:focus {
      outline: none;
    }
  }

  div.o-figure-border {
    z-index: 1;
    border: 0px solid var(--os-figure-border-color);

    &.o-selected {
      border-color: var(--os-selection-border-color);
    }
  }

  .o-figure-wrapper {
    position: absolute;
    box-sizing: content-box;
    pointer-events: auto;
    z-index: var(--os-components-importance-figure);

    &.o-figure-selected {
      z-index: var(--os-components-importance-figure-selected);
    }

    .o-fig-anchor {
      z-index: var(--os-components-importance-figure-anchor);
      position: absolute;
      width: 8px;
      height: 8px;
      background-color: var(--os-selection-border-color);
      outline: 1px solid white;

      &.o-top {
        cursor: n-resize;
      }
      &.o-topRight {
        cursor: ne-resize;
      }
      &.o-right {
        cursor: e-resize;
      }
      &.o-bottomRight {
        cursor: se-resize;
      }
      &.o-bottom {
        cursor: s-resize;
      }
      &.o-bottomLeft {
        cursor: sw-resize;
      }
      &.o-left {
        cursor: w-resize;
      }
      &.o-topLeft {
        cursor: nw-resize;
      }
    }

    .o-figure-menu {
      right: 0px;
      top: 0px;
      display: none;
    }

    .o-figure-menu-item {
      cursor: pointer;
    }

    .o-figure.active:focus,
    .o-figure:hover {
      .o-figure-menu {
        display: flex;
      }
    }
  }
}

/* Originates from src/components/figures/chart/chart_dashboard_menu/chart_dashboard_menu.css */
.o-spreadsheet .o-figure {
  &:not(:hover):not(:focus-within) .o-dashboard-chart-select {
    visibility: hidden;
  }

  .o-dashboard-chart-select {
    cursor: default;
    > div {
      height: 28px;
    }

    .o-chart-dashboard-item {
      &.active,
      &:hover,
      &:target {
        color: var(--os-gray-900) !important;
        background: var(--os-background-gray-color-hover);
      }

      .o-chart-preview {
        stroke-width: 2px;
        transform: scale(1.1);
        width: 16px;
        height: 16px;
      }
    }
  }
}

.o-spreadsheet {
  &.o-spreadsheet-mobile .o-figure {
    .o-dashboard-chart-select {
      display: block !important;
    }
  }
}

/* Originates from src/components/figures/chart/chartJs/chartjs.css */
.o-spreadsheet {
  .o-chart-custom-tooltip {
    font-size: 12px;
    background-color: #fff;
    z-index: var(--os-components-importance-figure-tooltip);
  }
}

/* Originates from src/components/figures/chart/chartJs/zoomable_chart/zoomable_chartjs.css */
.o-spreadsheet {
  .o-master-chart-container {
    height: var(--os-master-chart-height);
  }
}

/* Originates from src/components/error_tooltip/error_tooltip.css */
.o-spreadsheet {
  .o-error-tooltip {
    font-size: 13px;
    border-left: 3px solid red;
    padding: 10px;
    overflow-wrap: break-word;
    width: var(--os-error-tooltip-width);
    .o-error-tooltip-message {
      overflow: hidden;
    }
  }
}

/* Originates from src/components/dashboard/dashboard.css */
.o-spreadsheet {
  .o-dashboard-clickable-cell {
    position: absolute;
    cursor: pointer;
  }
}

/* Originates from src/components/dashboard/clickable_cell_sort_icon/clickable_cell_sort_icon.css */
.o-spreadsheet {
  .sorting-icon {
    margin: 1px;

    .fa-sort-desc {
      transform: translateY(-2px);
    }
    .fa-sort-asc {
      transform: translateY(4px);
    }
  }

  div:not(:hover) > .sorting-icon:has(> .fa-sort) {
    display: none;
  }
}

/* Originates from src/components/composer/top_bar_composer/top_bar_composer.css */
.o-spreadsheet {
  .o-topbar-composer-container {
    height: var(--os-desktop-topbar-toolbar-height);
  }

  .o-topbar-composer {
    height: fit-content;
    margin-top: -1px;
    margin-bottom: -1px;
    font-family: var(--os-default-font);

    &.o-topbar-composer-inactive {
      border-right: none !important;
    }

    &.o-topbar-composer-active {
      border-color: var(--os-selection-border-color) !important;
      z-index: var(--os-components-importance-top-bar-composer);
    }
  }

  .user-select-text {
    user-select: text;
  }
}

/* Originates from src/components/composer/standalone_composer/standalone_composer.css */
.o-spreadsheet {
  .o-standalone-composer {
    min-height: 24px;

    &.active {
      border-color: var(--os-action-color) !important;
    }

    &.o-invalid {
      border-bottom: 1px solid red !important;
      background-color: var(--os-alert-danger-bg);
    }

    /* As the standalone composer is potentially very small (eg. in a side panel), we remove the scrollbar display */
    scrollbar-width: none; /* Firefox */
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

/* Originates from src/components/composer/speech_bubble/speech_bubble.css */
.o-spreadsheet {
  .o-speech-bubble {
    background-color: var(--os-white-bg);
    box-sizing: border-box;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
    z-index: var(--os-components-importance-popover);

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      background-color: var(--os-white-bg);
      height: var(--os-bubble-arrow-size);
      width: var(--os-bubble-arrow-size);
      transform-origin: top left;
      transform: translate(0, -67%) rotate(45deg);
      border-right: 1px solid var(--os-border-color);
      border-bottom: 1px solid var(--os-border-color);
      box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
    }
  }
  .o-speech-content {
    max-width: 300px;
  }
}

/* Originates from src/components/composer/grid_composer/grid_composer.css */
.o-spreadsheet {
  div.o-grid-composer {
    color-scheme: light;
    z-index: var(--os-components-importance-grid-composer);
    position: absolute;
    font-family: var(--os-default-font);

    display: flex;
    align-items: center;
  }

  div.o-cell-reference {
    position: absolute;
    z-index: var(--os-components-importance-grid-composer);
    background: var(--os-selection-border-color);
    color: white;
    font-size: 12px;
    line-height: 14px;
    padding: 6px 7px;
  }
}

/* Originates from src/components/composer/formula_assistant/formula_assistant.css */
.o-spreadsheet .o-formula-assistant {
  outline: unset;
  .o-formula-assistant-head {
    background-color: var(--os-composer-assistant-background);
    padding: 10px;
  }
  .o-formula-assistant-arg-description {
    font-size: 85%;
  }
  .o-formula-assistant-focus {
    color: var(--os-composer-assistant-color);
    text-shadow: 0px 0px 1px var(--os-composer-assistant-color);
    & + div {
      color: var(--os-black);
    }
  }
  .o-formula-assistant-gray {
    color: gray;
  }
  .collapsor {
    cursor: pointer;
    &:hover {
      background-color: var(--os-gray-400);
      color: var(--os-button-active-text-color);
    }

    .collapsor-arrow {
      transform-origin: 6px 8px;
      transform: rotate(-180deg);
      transition: transform 0.2s ease-in-out;

      .o-icon {
        width: 12px;
        height: 16px;
      }
    }
    &.collapsed .collapsor-arrow {
      transform: rotate(0deg);
    }
  }
}

/* Originates from src/components/composer/composer/composer.css */
.o-spreadsheet {
  .o-composer-container {
    .o-composer {
      overflow-y: auto;
      overflow-x: hidden;
      word-break: break-all;
      padding-right: 2px;

      caret-color: var(--os-black);
      padding-left: 3px;
      padding-right: 3px;
      outline: none;

      tab-size: 4;

      p {
        margin-bottom: 0px;

        span {
          white-space: pre-wrap;
          /* On some browsers (chromium ?) it is somehow possible to hover two of the composer's spans at the same time, leading to
           * flickering with a succession of onmouseenter/onmouseleave events. A small invisible padding seems to prevent the issue.*/
          padding-left: 0.01px;

          &.selector-flag:after {
            content: "␣";
            color: var(--os-composer-selector-flag-color);
          }

          &.highlight-parenthesis-flag:not(.highlight-flag) {
            border-radius: 5px;
            background-color: var(--os-gray-400);
            padding: 1.5px 0px 1.5px 0px;
          }

          &.highlight-flag {
            background-color: var(--os-composer-highlight-flag-color);
          }
        }
      }
    }

    .o-composer[placeholder]:empty:not(:focus):not(.active)::before {
      content: attr(placeholder);
      color: var(--os-composer-placeholder-color);
      position: relative;
      top: 0%;
      pointer-events: none;
    }

    .fa-stack {
      /* reset stack size which is doubled by default */
      width: 18px;
      height: 18px;
      line-height: 18px;
    }

    .force-open-assistant {
      left: -1px;
      top: -1px;

      .fa-question-circle {
        color: var(--os-primary-button-bg);
      }
    }

    .o-composer-assistant {
      margin-top: 1px;

      .o-semi-bold {
        /* FIXME: to remove in favor of Bootstrap
        * 'fw-semibold' when we upgrade to Bootstrap 5.2
        */
        font-weight: 600 !important;
      }
    }

    .o-composer-assistant-container {
      .fa-times-circle {
        color: var(--os-primary-button-bg);
      }
    }
  }
}

/* Originates from src/components/composer/autocomplete_dropdown/autocomplete_dropdown.css */
.o-spreadsheet {
  .o-autocomplete-dropdown {
    pointer-events: auto;
    cursor: pointer;
    max-width: 400px;
    z-index: 1;
    .o-autocomplete-value-focus {
      background-color: var(--os-composer-assistant-background);
    }
    & > div {
      padding: 1px 5px 5px 5px;
      .o-autocomplete-description {
        padding-left: 5px;
        font-size: 11px;
      }
    }
  }
}

/* Originates from src/components/color_picker/color_picker_widget.css */
.o-spreadsheet {
  .o-color-picker-widget {
    display: flex;
    position: relative;
    align-items: center;
    height: 30px;

    .o-color-picker-button-style {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 2px;
      padding: 3px;
      border-radius: 2px;
      cursor: pointer;
      &:not([disabled]):hover {
        background-color: var(--os-background-gray-color-hover);
      }
    }

    .o-color-picker-button {
      > span {
        border-bottom: 4px solid;
        height: 20px;
        margin-top: 2px;
        display: block;
      }
      &[disabled] {
        pointer-events: none;
        opacity: 0.3;
      }
    }
  }
}

/* Originates from src/components/color_picker/color_picker.css */
.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%;
        }
      }
    }
    .o-color-picker-line-item {
      width: calc(var(--os-item-edge-length) + (2 * var(--os-item-border-width)));
      height: calc(var(--os-item-edge-length) + (2 * var(--os-item-border-width)));
      margin: 0px;
      border-radius: 50px;
      border: var(--os-item-border-width) solid light-dark(var(--os-gray-600), transparent);
      padding: 0px;
      font-size: 16px;
      &:hover {
        background-color: var(--os-background-gray-color-hover);
        outline: 1px solid var(--os-gray-500);
        cursor: pointer;
      }
    }
    .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, var(--os-white) 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%;
      }
    }
  }
}

/* Originates from src/components/collaborative_client_tag/collaborative_client_tag.css */
.o-spreadsheet {
  .o-client-tag {
    position: absolute;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: white;
    pointer-events: none;
    font-size: var(--os-default-font-size);
  }
}

/* Originates from src/components/bottom_bar/bottom_bar.css */
.o-spreadsheet {
  .o-spreadsheet-bottom-bar {
    font-size: 15px;
    background-color: var(--os-background-gray-color);
    padding-left: var(--os-header-width);

    .o-sheet-item {
      cursor: pointer;
      &:hover {
        background-color: var(--os-background-gray-color-hover);
      }
    }

    .o-all-sheets {
      max-width: 70%;
      .o-bottom-bar-fade-out {
        background-image: linear-gradient(-90deg, var(--os-gray-400), transparent 1%);
      }
      .o-bottom-bar-fade-in {
        z-index: 1;
        background-image: linear-gradient(90deg, var(--os-gray-400), transparent 1%);
      }
      .o-sheet-list {
        overflow-y: hidden;
        overflow-x: auto;
        &::-webkit-scrollbar {
          display: none; /* Chrome */
        }
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
      }
    }

    .o-bottom-bar-arrows {
      .o-bottom-bar-arrow {
        cursor: pointer;
        &:hover:not([class*="o-disabled"]) {
          .o-icon {
            opacity: 0.9;
          }
        }
        .o-icon {
          height: 18px;
          width: 18px;
          font-size: 18px;
        }
      }
    }
  }

  &.o-spreadsheet-mobile .o-spreadsheet-bottom-bar {
    padding-left: 0;
    .add-sheet-container {
      order: 2;
    }
    .o-add-sheet {
      margin-left: 0.5rem;
    }
    .o-all-sheets {
      max-width: none;
    }
  }
}

/* Originates from src/components/bottom_bar/bottom_bar_statistic/bottom_bar_statistic.css */
.o-spreadsheet {
  .o-selection-statistic {
    margin-right: 20px;
    padding: 4px 4px 4px 8px;
    cursor: pointer;
    &:hover {
      background-color: var(--os-background-gray-color-hover) !important;
    }
  }
}

/* Originates from src/components/bottom_bar/bottom_bar_sheet/bottom_bar_sheet.css */
.o-spreadsheet {
  .o-sheet {
    padding: 0 15px;
    padding-right: 10px;
    height: var(--os-desktop-bottombar-height);
    margin-left: -1px;
    cursor: pointer;
    &:hover {
      background-color: var(--os-background-gray-color-hover);
    }

    &.active {
      color: var(--os-action-color);
      background-color: var(--os-active-sheet-bg);
      box-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    }

    .o-sheet-icon {
      z-index: 1;

      &:hover {
        background-color: var(--os-background-gray-color-hover);
      }
    }

    .o-sheet-name {
      outline: none;
      padding: 2px 4px;

      &.o-sheet-name-editable {
        border-radius: 2px;
        border: 2px solid mediumblue;
        /* negative margins so nothing moves when the border is added */
        margin-left: -2px;
        margin-right: -2px;
      }
    }

    .o-sheet-color {
      bottom: 0;
      left: 0;
      height: 6px;
      z-index: 1;
      width: calc(100% - 1px);
    }
  }

  .o-spreadshet-mobile .o-sheet {
    height: var(--os-mobile-bottombar-height);
  }
}

/* Originates from src/components/border_editor/border_editor.css */
.o-spreadsheet {
  .o-border-selector {
    padding: 4px;

    .o-divider {
      margin: 0 6px;
    }

    .o-border-selector-section {
      .o-dropdown-line {
        height: 30px;
        margin: 1px;
        .o-line-item {
          padding: 4px;
          width: 26px;
          height: 26px;
          &.active {
            background-color: var(--os-button-active-bg);
          }
        }
      }
      .o-border-style-tool {
        padding: 0px 3px;
        margin: 2px;
        height: 25px;
      }
    }
  }

  .o-border-style-dropdown {
    padding: 4px;
    .o-style-preview {
      margin: 7px 5px 7px 5px;
      width: 60px;
      height: 5px;
    }
    .o-style-thin {
      border-bottom: 1px solid var(--os-black);
    }
    .o-style-medium {
      border-bottom: 2px solid var(--os-black);
    }
    .o-style-thick {
      border-bottom: 3px solid var(--os-black);
    }
    .o-style-dashed {
      border-bottom: 1px dashed var(--os-black);
    }
    .o-style-dotted {
      border-bottom: 1px dotted var(--os-black);
    }
    .o-dropdown-border-type {
      cursor: pointer;
      &:not(.o-disabled):not(.active):hover {
        background-color: var(--os-button-hover-bg);
      }
    }
    .o-dropdown-border-check {
      width: 20px;
      font-size: 12px;
    }
    .o-border-picker-button {
      padding: 0px !important;
      margin: 5px 0px 0px 0px !important;
      height: 25px !important;
    }
  }
}

/* Originates from src/components/autofill/autofill.css */
.o-spreadsheet {
  .o-autofill {
    position: absolute;
    border: 1px solid white;
    background-color: var(--os-selection-border-color);
    height: var(--os-autofill-edge-length);
    width: var(--os-autofill-edge-length);
  }

  .o-autofill-handler {
    position: absolute;
    height: var(--os-autofill-edge-length);
    width: var(--os-autofill-edge-length);
    &:hover {
      cursor: crosshair;
    }
  }

  .o-autofill-nextvalue {
    position: absolute;
    background-color: #ffffff;
    border: 1px solid black;
    padding: 5px;
    font-size: 12px;
    pointer-events: none;
    white-space: nowrap;
  }
}

/* Originates from src/components/animation/ripple.css */
.o-spreadsheet {
  .o-ripple {
    z-index: 1;
  }
}

/* Originates from src/components/action_button/action_button.css */
.o-spreadsheet {
  .o-menu-item-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px 1px;
    padding: 0px 1px;
    border-radius: 2px;
    min-width: 22px;
  }
  .o-disabled {
    opacity: 0.6;
    cursor: default;
  }
}