/**
NOTE JN: Please Note: There are below styling rules which sit outside of the web component namespace.
THIS IS INTENDED.
These styles are applied to the shadow root which do not bleed styles out into the rest of the DOM.
Styles are importing directly into the shadow root.
 */

:host(pragma-column-container) {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

::slotted([slot=pragma-column-container-columns]) {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  height: 100%;
}

.pragma-column-container-swipe-indicator {
  display: none;
}
.pragma-column-container-swipe-indicator .active-swipe-indicator svg circle {
  r: 0.3125rem;
  fill-opacity: 1;
}

.pragma-column-container-columns {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  height: 100%;
}

pragma-column-container .column {
  flex: 0 0 50%;
  will-change: transform;
  transition: transform 0.2s ease-in;
  padding: 0.5rem;
  width: 100%;
  height: 100%;
}
pragma-column-container .column-hidden {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

@media screen and (max-width: 812px) {
  pragma-column-container .column {
    position: absolute;
  }

  .pragma-column-container-swipe-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.5rem;
    background: var(--c-p-button-bg);
  }
  .pragma-column-container-swipe-indicator svg {
    width: 1.5rem;
    height: 1.5rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none !important;
  }
  .pragma-column-container-swipe-indicator svg circle {
    cx: 0.75rem;
    cy: 0.75rem;
    r: 0.25rem;
    fill: var(--c-text);
    fill-opacity: 0.5;
  }
}