text: import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
  import '@vaadin/vaadin-lumo-styles/color.js';
  import '@vaadin/vaadin-lumo-styles/sizing.js';
  import '@vaadin/vaadin-lumo-styles/spacing.js';
  import '@vaadin/vaadin-lumo-styles/style.js';
  
  registerStyles(
    'vaadin-split-layout',
    css`
      [part='splitter'] {
        min-width: var(--lumo-space-s);
        min-height: var(--lumo-space-s);
        background-color: var(--lumo-contrast-5pct);
        transition: 0.1s background-color;
      }
  
      [part='handle'] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--lumo-size-m);
        height: var(--lumo-size-m);
      }
  
      [part='handle']::after {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: var(--lumo-border-radius);
        background-color: var(--lumo-contrast-30pct);
        transition: 0.1s opacity, 0.1s background-color;
      }
  
      :host([orientation='vertical']) [part='handle']::after {
        width: 100%;
        height: 4px;
      }
  
      /* Hover style */
      [part='splitter']:hover [part='handle']::after {
        background-color: var(--lumo-contrast-40pct);
      }
  
      /* Disable hover for touch devices */
      @media (pointer: coarse) {
        [part='splitter']:hover [part='handle']::after {
          background-color: var(--lumo-contrast-30pct);
        }
      }
  
      /* Active style */
      [part='splitter']:active [part='handle']::after {
        background-color: var(--lumo-contrast-50pct);
      }
  
      /* Small/minimal */
      :host([theme~='small']) > [part='splitter'] {
        border-left: 1px solid var(--lumo-contrast-10pct);
        border-top: 1px solid var(--lumo-contrast-10pct);
      }
  
      :host([theme~='small']) > [part='splitter'],
      :host([theme~='minimal']) > [part='splitter'] {
        min-width: 0;
        min-height: 0;
        background-color: transparent;
      }
  
      :host([theme~='small']) > [part='splitter']::after,
      :host([theme~='minimal']) > [part='splitter']::after {
        content: '';
        position: absolute;
        top: -4px;
        right: -4px;
        bottom: -4px;
        left: -4px;
      }
  
      :host([theme~='small']) > [part='splitter'] > [part='handle']::after,
      :host([theme~='minimal']) > [part='splitter'] > [part='handle']::after {
        opacity: 0;
      }
  
      :host([theme~='small']) > [part='splitter']:hover > [part='handle']::after,
      :host([theme~='small']) > [part='splitter']:active > [part='handle']::after,
      :host([theme~='minimal']) > [part='splitter']:hover > [part='handle']::after,
      :host([theme~='minimal']) > [part='splitter']:active > [part='handle']::after {
        opacity: 1;
      }
  
      /* RTL specific styles */
      :host([theme~='small'][dir='rtl']) > [part='splitter'] {
        border-left: auto;
        border-right: 1px solid var(--lumo-contrast-10pct);
      }
    `,
    { moduleId: 'lumo-split-layout' }
  );
  