// Your custom variables
@import "_variables";

// Bootstrap
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/media";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/print";

// Fontawesome
$fa-font-path: "~font-awesome/fonts";

@import "~font-awesome/scss/font-awesome";

// Extra modules
$lightbox-breakpoint: map-get($grid-breakpoints, "sm");
$lightbox-link-hover-color: $link-hover-color;

@import "~meta-lightbox/scss/meta-lightbox";
@import "~meta-lightbox/scss/meta-lightbox-theme";
@import "_components/ui.carousel";

/*
 * some basic styles
 */

// hide default page title cuz elemental object will be used to display titles
h1 {
    display: none;
}

// don't let images be wider than the parent layer
iframe,
img {
    max-width: 100%;
}

a:hover,
a:focus {
    opacity: .8;

    .fas,
    .fab,
    &.fas,
    &.fab {
        transform: rotate(-180deg);
    }
}

// transactions
.transition,
a, a img,
a .fas, a .fab,
a.fas, a.fab,
button, input, optgroup, select, textarea,
.btn,
.alert,
.dropdown,
[data-target],
.container,
.container-fluid,
.row,
[class="col-*"] {
    transition: all 0.4s ease;
}

// stick navbar to top using mobile layout
#Header {
    position: relative;
    padding-top: $grid-gutter-height / 2;
    padding-bottom: 1rem;

    @media (min-width: map-get($grid-breakpoints, "lg")) {
        padding-top: 1rem;
        padding-bottom: 0;
    }
}

#Navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    @media (min-width: map-get($grid-breakpoints, "lg")) {
        position: relative;
        margin-top: 1rem;
    }
}

// add top/bottom paddings for basic elements
.page-content > .element {
    position: relative;
    padding: ($grid-gutter-height / 2) 0;

    // remove paddings of the slideshow
    &.dynamic__elements__image__elements__elementimage,
    &.dynamic__elements__flexslider__elements__elementslideshow {
        padding: 0;
    }
}

// remove container paddings for the slideshow
.dynamic__elements__image__elements__elementimage,
.dynamic__elements__flexslider__elements__elementslideshow {
    .container-fluid {
        padding: 0;
    }
}

// Your custom UI
@import "_typography";
@import "_layout";