import { css } from 'lit';
export default css `
#app {
  display: grid;
  grid-template:
    "nav header" 64px
    "nav content" calc(100vh - 64px) / minmax(360px, 2fr) 10fr;
}

header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: start;
}

nav {
  grid-area: nav;
  padding: 12px;
  margin-right: 24px;
}

main {
  overflow: auto;
  grid-area: content;
  margin: 8px 12px 12px 0;
  box-sizing: border-box;
}

#app.inactive header,
#app.inactive nav,
#app.inactive main {
  pointer-events: none;
}

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-title {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 16px;
  margin: 0px;
  box-sizing: border-box;
  color: var(--md-sys-color-on-surface);
}

/* Header */
.search-box {
  height: 48px;
  border-radius: var(--md-sys-shape-corner-medium);
  background-color: var(--md-ref-palette-neutral95);
  display: flex;
  align-items: center;
  
  padding: 8px 24px;
  box-sizing: border-box;
  
  width: calc(33.3333%); /* 4 columns */
  
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-variant);

  position: relative;
  z-index: 0;
}

.search-box::before {
  content: "";
  position: absolute;
  inset: 0px;
  opacity: 0;
  background-color: var(--md-sys-color-on-surface-variant);
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
  z-index: -1;
}

.search-icon {
  margin-right: 20px;
}

.search-box:focus-within {
  outline: -webkit-focus-ring-color auto 1px;
  outline-offset: 0px;
}

.search-box > input {
  align-self: stretch;
  background: transparent;
  border: none;
  flex: 1;
  outline: none;
  caret-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-surface);
}

.search-box > input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-label-large-font-family-name);
  font-style: var(--md-sys-typescale-label-large-font-family-style);
  font-weight: var(--md-sys-typescale-label-large-font-weight, 500);
  font-size: var(--md-sys-typescale-label-large-font-size, 14px);
}

.spaced-right {
  margin-left: auto;
}

.workspace-dropdown {
  margin-right: 12px;
  color: var(--md-sys-color-on-surface);
}

.workspace-selector {
  height: 56px;
  outline: none;
}

.workspace-selector .surface {
  border-color: var(--md-ref-palette-neutral40);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--md-sys-shape-corner-medium);
  height: inherit;
  min-width: 160px;
  display: flex;
  align-items: center;
  position: relative;
}

.workspace-selector .surface::before {
  content: '';
  position: absolute;
  border-radius: inherit;
  background-color: var(--md-sys-color-primary);
}

.workspace-selector:hover .surface::before {
  opacity: var(--md-sys-state-hover-state-layer-opacity);
  inset: 0;
}

.workspace-selector:focus-within .surface::before {
  opacity: var(--md-sys-state-focus-state-layer-opacity);
  inset: 0;
}

.workspace-selector .content {
  display: flex;
  flex-direction: row;
  flex: 1;
  padding: 0 12px;
}

.workspace-selector .body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

main {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-primary-container);

  overflow: hidden;
  display: flex;
}

main .content {
  padding: 20px;
  border-radius: inherit;

  flex: 1;
  display: flex;
  flex-direction: column;

  overflow: hidden;
}
main .content > * {
  position: relative;
  z-index: 1;
}

.section-header {
  display: flex;
  align-items: center;
  z-index: 2 !important;
}

.spacer {
  flex: 1;
}

/* data table */

.name-cell {
  flex: 1;
}

.updated-cell {
  width: 200px;
}

.owner-cell {
  width: 200px;
}

.menu-cell {
  width: 48px;
}

.data-table-body-cell.menu-cell {
  padding: 0;
}

.cell-icon {
  margin-right: 12px;
  min-width: 24px;
}

dialog {
  min-width: 360px;
}

dialog .input {
  width: 100%;
}

.workspace-dialog-info {
  max-width: 460px;
}

.workspace-intro-form {
  display: flex;
  align-items: center;
}

.workspace-intro-form .input {
  flex: 1;
  margin-right: 20px;
}

.breadcrumbs {
  margin: 0 20px;
  padding: 0;
}

.breadcrumbs ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumbs .separator {
  display: inline-block;
  margin: 0 8px;
}

.breadcrumbs a {
  color: var(--md-sys-color-on-surface-variant);
}

.breadcrumbs li:last-of-type a {
  text-decoration: none;
  color: var(--md-sys-color-on-surface);
}

.import-error {
  background-color: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  padding: 12px;
  margin-top: 20px;
  border-radius: 12px;
  white-space: pre-wrap;
}
`;
//# sourceMappingURL=ApiClient.styles.js.map