.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);
    }

    .lock-icon {
      --os-icon-edge-length: 14px;
    }
  }

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