import { css } from 'lit';
import surfaceStyles from '../../styles/m3/surface.module.js';
export default [
    surfaceStyles,
    css `
    :host {
      display: flex;
      position: relative;
      flex-direction: column;
      flex: 1;
    }

    .content {
      display: flex;
      flex: 1;
    }

    :host([constrain]) .content {
      overflow: hidden;
    }

    :host([layout='horizontal']) .content {
      flex-direction: row;
    }

    :host([layout='vertical']) .content {
      flex-direction: column;
    }

    :host ::slotted(*) {
      flex: 1;
    }

    :host([layout='vertical']) ::slotted(split-view) {
      margin-top: 10px;
      margin-bottom: 10px;
    }

    :host([layout='vertical']) ::slotted(split-view:last-of-type) {
      margin-bottom: 0;
    }

    :host([layout='vertical']) ::slotted(split-view:first-of-type) {
      margin-top: 0;
    }

    .layout-tabs {
      display: flex;
      align-items: center;
      /* background: var(--layout-tabs-background, var(--secondary-background-color)); */
    }

    .layout-tab {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex: 1 1 200px;
      max-width: 200px;
      min-width: 40px;
      width: 200px;
      height: 100%;
      font-size: 0.94rem;
      padding: 0px 12px;
      border-radius: var(--md-sys-shape-corner-small-top);
      height: 40px;
      outline: none;
      justify-content: flex-start;
      text-transform: none;
      color: var(--md-sys-color-on-surface);

      font-family: var(--md-sys-typescale-body-medium-font);
      font-weight: var(--md-sys-typescale-body-medium-weight);
      font-size: var(--md-sys-typescale-body-medium-size);
      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
      line-height: var(--md-sys-typescale-body-medium-height);
    }

    .tab-label {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .is-dirty .tab-label {
      font-style: italic;
    }

    .is-dirty .tab-label::after {
      content: '*';
      user-select: none;
    }

    /* .layout-tab.selected {
  background: var(--layout-tab-select-background, var(--primary-background-color));
} */

    .layout-tab:hover::before {
      background-color: var(--md-sys-color-primary);
      opacity: var(--md-sys-state-hover-state-layer-opacity);
      position: absolute;
      inset: 0;
      content: '';
      border-radius: inherit;
    }

    .layout-tab:focus::before {
      background-color: var(--md-sys-color-primary);
      opacity: var(--md-sys-state-focus-state-layer-opacity);
      position: absolute;
      inset: 0;
      content: '';
      border-radius: inherit;
    }

    .tab-favicon {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }

    .close-icon {
      width: 16px;
      height: 16px;
      margin-left: auto;
      z-index: 2;
    }

    .close-icon:hover {
      background-color: var(--md-sys-color-outline-variant);
      border-radius: 50%;
    }

    .tab-divider {
      width: 1px;
      min-width: 1px;
      height: 20px;
      background-color: var(--md-sys-color-outline-variant);
    }

    .tab-divider.hidden {
      background-color: transparent;
    }

    .drag-region {
      position: absolute;
      /* background-color: var(--md-sys-color-surface); */
      inset: 0;
      z-index: 10;
      border-radius: 12px;
    }

    .drag-region::before {
      content: '';
      background-color: var(--md-sys-color-scrim);
      opacity: 0.16;
      inset: 0;
      z-index: 10;
      position: absolute;
      border-radius: inherit;
    }

    /* .drag-region.center {
  top: 0;
  bottom: 0;
  left: 0;
  right:0;
} */

    .drag-region.west {
      right: 50%;
    }

    .drag-region.east {
      left: 50%;
    }

    .drag-region.north {
      bottom: 50%;
    }

    .drag-region.south {
      top: 50%;
    }
  `,
];
//# sourceMappingURL=SplitView.styles.js.map