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

const styles = css`
  ${componentStyles}

  :host {
    display: block;
    min-height: 100px;
  }

  .map {
    background-color: var(--flow-ui-map-background-color);
    position: relative;
    height: 100%;
  }

  .map__container {
    position: absolute;
    inset: 0;
  }

  ::slotted(.maplibregl-map) {
    position: absolute !important;
    inset: 0;
  }

  .map--fixed ::slotted(.maplibregl-map) {
    position: fixed !important;
    inset: var(--flow-ui-map-inset, 0);
  }

  .map__overlay {
    position: absolute;
    inset: 0;

    pointer-events: none;
    display: flex;
    flex-direction: column;
  }

  .map__control-containers {
    flex: 1;
    position: relative;
  }

  .map__control-container {
    position: absolute;
  }

  .map__control-container--top-left {
    top: var(--flow-ui-spacing-small);
    left: var(--flow-ui-spacing-small);
  }

  .map__control-container--top-right {
    top: var(--flow-ui-spacing-small);
    right: var(--flow-ui-spacing-small);
  }

  .map__control-container--bottom-left {
    bottom: var(--flow-ui-spacing-small);
    left: var(--flow-ui-spacing-small);
  }

  .map__control-container--bottom-right {
    bottom: var(--flow-ui-spacing-small);
    right: var(--flow-ui-spacing-small);
  }

  .map__busy-indicator {
    position: absolute;
    top: 0;
    width: 100%;
    display: none;

    --height: var(--flow-ui-map-busy-track-size);
    --track-color: var(--flow-ui-map-busy-track-color);
    --indicator-color: var(--flow-ui-map-busy-indicator-color);

    &::part(base) {
      border-radius: 0;
    }
  }

  .map__busy-indicator--busy {
    display: unset;
  }
`;

export { styles as default };
