@odoo/o-spreadsheet/dist/o_spreadsheet.css

A spreadsheet component

/*
 * 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(--o