import { css } from 'chrome://resources/lit/v3_0/lit.rollup.js';
import './shared_vars.css.js';
import { getCss as getPdfShared } from './pdf_shared.css.js';
import { getCss as getCrHiddenStyleLit } from 'chrome://resources/cr_elements/cr_hidden_style_lit.css.js';
import { getCss as getCrSharedStyleLit } from 'chrome://resources/cr_elements/cr_shared_style_lit.css.js';
import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
let instance = null;
export function getCss() {
    return instance || (instance = [...[getPdfShared(), getCrHiddenStyleLit(), getCrSharedStyleLit()], css `
:host {
  --sidenav-selected-tab-color: var(--google-blue-300);
  background-color: var(--viewer-side-background-color);
  display: flex;
  height: 100%;
  min-width: var(--viewer-pdf-sidenav-width);
  overflow: hidden;
  width: var(--viewer-pdf-sidenav-width);
}

#icons {
  display: flex;
  flex-direction: column;
  min-width: 64px;
}

/* These are dummy styles currently - replace with real content. */
#content {
  color: white;
  flex: 1;
  overflow-x: hidden;
}

#icons:not([hidden]) + #content {
  --viewer-thumbnail-bar-padding-inline-end: 28px;
}

.selected cr-icon-button {
  --cr-icon-button-fill-color: var(--sidenav-selected-tab-color);
}

.button-wrapper {
  --button-wrapper-height: 36px;
  --button-wrapper-margin: 12px;
  --button-wrapper-total-height: calc(
      var(--button-wrapper-height) + var(--button-wrapper-margin));
  align-items: center;
  display: flex;
  height: var(--button-wrapper-height);
  margin: var(--button-wrapper-margin) 0;
  width: 100%;
}

.cr-vertical-tab {
  --cr-vertical-tab-selected-color: var(--sidenav-selected-tab-color);
}

.cr-vertical-tab::before {
  transform: translateY(var(--button-wrapper-total-height));
  transition: transform 250ms cubic-bezier(.4, 0, .2, 1);
}

.cr-vertical-tab.selected + .cr-vertical-tab::before {
  transform: translateY(calc(-1 * var(--button-wrapper-total-height)));
}

.cr-vertical-tab.selected::before {
  transform: translateY(0);
}

cr-icon-button {
  margin: 0 auto;
}`]);
}
