@charset 'utf-8';


@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-global-styles;
@include foundation-grid;
@include foundation-flex-grid;

@include foundation-xy-grid-classes;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
// @include foundation-range-input;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-card;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
// @include foundation-float-classes;
@include foundation-flex-classes;

// @include foundation-prototype-classes;

@include motion-ui-transitions;
@include motion-ui-animations;

/*
  My custom styles:
  Add your scss files below to structure your project styles
*/

// Global
@import "global/accessibility";
@import "global/colors";
@import "global/wp-admin";
@import "global/wp-overrides";
@import "global/gutenberg";

// Modules
@import "modules/navigation";
@import "modules/content";
@import "modules/footer";
@import "modules/editor-style";

// Components
@import "components/buttons";
@import "components/cards";
@import "components/featured-image";
@import "components/dividers";
@import "components/links";
@import "components/loading-beer";

// Templates
@import "templates/front";
@import "templates/kitchen-sink";



header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 20vh;
  max-width: $global-width;
  margin: 0 auto;
  padding: rem-calc(40);

  h1 {
    flex: 0 1 50%;
  }

  .search-box{
    flex: 0 1 50%;
    margin-bottom: 0;
    position: relative;
    max-width: rem-calc(500);
    #search-text{
      margin-bottom: 0;
    }
  }


  #autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: $white;
    color: $black;
    z-index: 1000;
    max-height: rem-calc(200);
    overflow-y: scroll;
    .autocomplete-city{
      display: flex;
      width: 100%;
      background-color: $body-background;
      color: $white;
      padding: rem-calc(10) rem-calc(20);
      align-items: center;
      cursor: pointer;
      transition: background-color .3s ease-in;
      border-bottom: 1px solid lighten($body-background, 15%);
      &:last-child{
        border-bottom: 0;
      }
      &:hover {
        background-color: lighten($body-background, 15%);
      }
      i {
        margin-right: rem-calc(5);
      }
    }
  }
}

#search-text{
  background: transparent;
  padding: rem-calc(25) rem-calc(10);
  font-size: rem-calc(22);
  letter-spacing: rem-calc(3);
  color: $light-gray;
  border: 0;
  border-bottom: rem-calc(2) solid $medium-gray;
  &:active,
  &:focus {
    outline: 0;
    background: transparent;
  }
}

.brewery-card {
  min-height: rem-calc(165);
  margin-bottom: 2px;
  transition: background-color 0.3s ease-in;
  cursor: pointer;

  &:last-child{
    margin-bottom: 0;
  }

  h5{
    color: lighten($white, 30%);
  }

  .button {
    margin-bottom: 0;
  }

  &.active,
  &:hover{
    background-color: lighten($card-background, 10%);
  }

}


#map,
#brewery-container{
  min-height: 80vh;
  max-height: 80vh;
  overflow: hidden;
}
#brewery-container {
  overflow-y: auto;
}

/* Marker tweaks */
#map {
  .mapboxgl-popup-close-button {
    display: none;
  }

  .mapboxgl-popup-content {
    background-color: $body-background;
    color: $white;
    padding: 0;
    width: rem-calc(180);
    padding: rem-calc(20);
    font-size: rem-calc(16)
  }

  .mapboxgl-popup-content-wrapper {
    padding: 1%;
  }

  .mapboxgl-popup-content div {
    padding: 10px;
  }

  .mapboxgl-container .leaflet-marker-icon {
    cursor: pointer;
  }

  .mapboxgl-popup-anchor-top>.mapboxgl-popup-content {
    margin-top: 15px;
  }

  .mapboxgl-popup-anchor-top>.mapboxgl-popup-tip {
    border-bottom-color: #91c949;
  }
}
