@import "../mixins";

.explore-map-page {

  & .explore-map-container {
  
    & .explore-map-section {
      lost-flex-container: row;
      & .explore-map-sidebar {
        padding: var(--gutter) 0 var(--gutter) var(--gutter);
        lost-column: 1/4;
        & h1 {
          @add-mixin font-xxl;
          margin: 0px;
          @add-mixin heading-font;
          line-height: 1.1em;
          color: var(--white);
          text-transform: uppercase;
        }
      }
      & .explore-map-content {
        lost-column: 3/4;
        background: #434756;
      
        lost-flex-container: column;
        padding: calc(var(--gutter)/2) calc(var(--gutter));

        &.cart {
          padding: 0px;
          & .map-options-row {
            padding: 15px 15px 5px 15px;
          }
        }

        & .map-options-row {
          lost-flex-container: row;
          margin-bottom: calc(var(--gutter)/2);
        }
        & .map-options-footer {
          display: flex;
          flex-direction: row;
        }
        & .explore-map-loading {
          position: absolute;
          top: 0;
          left: 0;
          z-index: var(--foreground);
          padding: 16px;
          width: 100%;
          height: 100%;

          color: var(--white);
          background-color: var(--dark-3);

          & .bp3-non-ideal-state-visual {
            max-width: 200px;
            width: 100%;
            & .bp3-progress-meter {
              background-color: var(--white);
              @add-mixin body-font;
            }
          }
          & .bp3-non-ideal-state-title {
            @add-mixin body-font;
            color: var(--white);
          }
          max-width: 0;
          visibility: hidden;
          &.loading {
            max-width: none;
            visibility: visible;
          }
        }
      }
    }
  }
}

@add-mixin for-xl {
}

@add-mixin for-lg {
  .explore-map-page {
  }
}

@add-mixin for-md {
  .explore-map-page {
  }
}

@add-mixin for-sm {
  .explore-map-page {
  }
}

@add-mixin for-xs {
  .explore-map-page {
  }
}

@add-mixin for-xx {
  .explore-map-page {
  }
}
