@import 'modules/prefixer';
@import 'modules/normalize';
@import 'modules/variables';
@import "materialize/components/toast";
@import "materialize/components/tooltip";
@import "nouislider/distribute/nouislider";
@import "bootstrap-datepicker/dist/css/bootstrap-datepicker3";

// the lean-overlay added my materialize for modals is outside of gogo-load-css container
.lean-overlay {
  position: fixed;
  z-index:999;
  top: -100px;
  left: 0;
  bottom: 0;
  right: 0;
  height: 125%;
  width: 100%;
  background: #000;
  display: none;
}

// Used by jQuery UI
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

// bootstrap dropdown used by datepicker
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 160px;
  padding: 10px;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

// Every styles will be loaded inside this container
// This permit to encapsulate styles, and reuse them
// If I want to use materialize in my all page (while including gogocarto inside the page) I can simply add
// the gogo-load-css class to the body, and the materialize style will be loaded for all the page
.gogo-load-css {
  @import 'materialize/materialize';
  @import 'leaflet/dist/leaflet';
  @import 'leaflet.markercluster/dist/MarkerCluster';
  @import "themes/themes";

  height:100%;
  width:100%;

  .gogocarto-container
  {
    @include flexbox();
    @include flex(1 auto);
    height: 100%;
    position: relative;
    overflow: hidden;

    @import "components/loaders";
    @import "components/directory-menu/directory-menu";
    @import 'components/icons';
    @import "components/map/map";
    @import "components/list/element-list";
    @import "components/gogo-controls";
    @import 'components/search-bar/search-bar';
    @import "components/element/element";
    @import "components/info-bar/info-bar";
    @import "components/modals/modals";
    @import "components/commons/shadow-bottom";
    @import "components/commons/scroll-bar";
    @import "components/commons/slider";
    @import "components/custom-popup";

    font-size: .95rem;
    @media #{$small-only} { font-size: 12px; }

    #directory-menu
    {
      position:absolute;
      height:100%;
    }

    #directory-content
    {
      position: relative;
      background-color: #9e9e9e;
      overflow: hidden;

      @include flex(1 auto);
      @include flexbox();
      @include flex-flow(column nowrap);
    }

    h1
    {
      font-size: 2.5rem;
      text-align: center;
      margin-top: .5rem;

      @media screen and (min-width: 600px) { font-size: 3.5rem; }
    }
  }

  label { color: inherit; }
}