@charset 'utf-8';

@import "fonts";
@import "font-awesome.min";
@import "material-icons-font";

@import "variables/colors";

@import "settings";

@import "foundation";

// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
@include foundation-flex-classes;
@include foundation-visibility-classes;
@include foundation-prototype-classes;

// Motion UI
//@include motion-ui-transitions;
//@include motion-ui-animations;

@import "utils/text";
@import "utils/checkbox";
@import "utils/spacing";
@import "utils/colouring";
@import "utils/background-repeat-images";

@import "components/icons";
@import "components/ripple";
@import "components/buttons";
@import "components/forms";
@import "components/select";
@import "components/xy-grid";
@import "components/checkbox";
@import "components/checkbox-extra-content";
@import "components/yes-no";
@import "components/listings";
@import "components/progress";
@import "components/tab-styling";
@import "components/admin-table";
@import "components/form-blocks";
@import "components/header";
@import "components/footer";
@import "components/listing-process";
@import "components/profile-icons";
@import "components/sign-out";
@import "components/emojis";
@import "components/prompts";
@import "components/listing-pages";
@import "components/address";
@import "components/upload-image";
@import "components/content-footer";
@import "components/progress-circle";
@import "components/calendar";
@import "components/search-bar";
@import "components/dashboard";
@import "components/spaces-tags";

@import "components/cards/listing-card";
@import "components/cards/booking-card";
@import "components/cards/search-card";
@import "components/cards/favourite-card";


@import "components/nav-dropdown";
@import "components/photo-viewer";
@import "components/profile-user-image";
@import "components/dividers";
@import "components/custom-slider";
@import "components/custom-pagination";
@import "components/article-excerpt";
@import "components/notes-input";
@import "components/file-pull";
@import "components/scroll-utils";

@import "components/tables";
@import "components/payout-methods-block";
@import "components/custom-off-canvas";
@import "components/dot-styled-seperator";
@import "components/activity-request-booking-dropdown";
@import "components/filter-pills";

@import "components/custom-tooltip";
@import "components/document-formatting";
@import "components/full-page-loader";

@import "components/reveals/custom-reveal";
@import "components/reveals/gallery-reveal";
@import "components/reveals/file-pull-reveal";
@import "components/reveals/location-dropdown-reveal";
@import "components/reveals/modal";

@import "components/share-medium";
@import "components/messaging";
@import "components/booking-action-block";
@import "components/star-rating-input";
@import "components/info-notification-block";
@import "components/peach-payments-custom";
@import "components/sliders/marketing";
@import "components/marketing-photo-grid";
@import "components/marketing-find-location-component";
@import "components/marketing-hero";
@import "components/activities-scheckbox";

@import "pages/register";
@import "pages/listing-progress-page";
@import "pages/search-page";
@import "pages/filmspace-listing-detail";
@import "pages/legal-page";
@import "pages/contact-us-page";
@import "pages/landing-correct";
@import "pages/reveiws";
@import "pages/marketing";
@import "pages/mobile-map-search";
@import "pages/everyspace-home-page";

.show-cell {
  height: 100px;
  background-color: $light-grey;
}

.charcoal-overlay {
  display: none;
  background-color: rgba($charcoal, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.search-filter-is-open .charcoal-overlay {
  @include breakpoint(medium up) {
    display: block;
    opacity: 1;
  }
}

hr {
  border-color: $off-white;
  border-width: 2px;
  margin: 2rem auto;
}

a:focus,
a:hover {
  color: inherit;
}

html {
  position: unset !important;
}

body {
  overscroll-behavior: contain;
}

.nav-dot.active {
  background-color: white;
  color: white;
}

.grecaptcha-badge {
  visibility: collapse !important;
  z-index: 9999;
}
body.show-recaptcha .grecaptcha-badge {
  visibility: initial !important;
}

[href="#tips"] {
  &:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: transparent;
    transition: background-color, width 0.25s;
  }
  &:hover {
    &:after {
      background-color: $honey;
      width: 100%;
    }
  }
}