import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';

const styles = css`
  ${componentStyles}

  :host {
    display: none;
    min-height: 0;

    --padding: var(--flow-ui-panel-padding);
  }

  :host([active]) {
    display: block;
  }

  .panel {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Body */
  .panel__body-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* For scrollable panel - enable scroll and (optionally) add padding to scrollable content */
  .panel--scrollable .panel__body-wrapper {
    overflow-y: auto;
  }

  .panel--scrollable.panel--with-padding .panel__body {
    padding: var(--padding);
  }

  .panel--scrollable.panel--with-padding.panel--has-form-controls .panel__body {
    padding: calc(var(--padding) * 1.5);
  }

  /* For non-scrollable panel - fix body at 100% and disable scroll. Padding is added to wrapper */
  .panel.panel--with-padding:not(.panel--scrollable) .panel__body-wrapper {
    padding: var(--padding);
  }

  .panel:not(.panel--scrollable) .panel__body {
    height: 100%;
    overflow-y: hidden;
  }
`;

export { styles as default };
