/*
 * Basic styles for silverstripe-elemental
 */
.blog-post-info {
    position: relative;
}

// add top/bottom paddings for basic elements
.element {
    position: relative;

    margin-top: $element-spacer-y;
    margin-bottom: $element-spacer-y;
    padding-top: $element-spacer-y;
    padding-bottom: $element-spacer-y;

    &:first-child {
        margin-top: 0;
    }

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

    // Sidebar-like elements
    &.secondary {
        padding-top: ($element-reduced-spacer-y);
        padding-bottom: ($element-reduced-spacer-y);
    }
}

// remove paddings of the slideshow
.dynamic__elements__image__elements__elementimage,
.site__elements__sliderelement {
    padding-top: 0;
    padding-bottom: 0;

    .element-container {
        max-width: none;
        padding: 0;
    }

    .carousel-slide {
        background: $sliderelement-carousel-slide-bg;
        max-height: $sliderelement-carousel-slide-max-y;
        align-items: center;

        .video {
            position: relative;
            height: 100%;
            @include responsive-ratio($sliderelement-carousel-slide-ratio-x, $sliderelement-carousel-slide-ratio-y, true);

            iframe {
                position: absolute;
                top: 0;
                height: 100% !important;
                width: 100vw !important;
                max-width: none;
                height: unquote(($sliderelement-carousel-slide-ratio-y / $sliderelement-carousel-slide-ratio-x) * 100 + 'vw') !important;
            }
        }
    }
}

// remove paddings for elemental list cuz inner elements will have paddings
.dnadesign__elementallist__model__elementlist {
    .element {
        padding-top: $element-reduced-spacer-y;
        padding-bottom: $element-reduced-spacer-y;
        margin-top: $element-reduced-spacer-y;
        margin-bottom: $element-reduced-spacer-y;
    }
}

.site__elements__accordion {
    >.element-container>.accordion {
        margin-top: $element-reduced-spacer-y;
        //padding-top: $element-reduced-spacer-y;
    }
}

.elements-sm,
.page-content-sidebar {

    // Sidebar elements
    .element {
        padding-top: ($element-reduced-spacer-y);
        padding-bottom: ($element-reduced-spacer-y);

        &:first-child {
            padding-top: 0;
        }

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

.dynamic__elements__image__elements__elementimage {
    .image-element__title {
        margin-bottom: 0;
    }

    .image-element__caption {
        margin: $element-reduced-spacer-y 0;
    }
}

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

    .element__image {
        min-width: 100%;
    }
}

// hide default page title cuz elemental object will be used to display titles
.element__breadcrumbs {
    margin-bottom: calc(-2 * #{inspect($element-spacer-y)});

    .container {}

    .breadcrumb-link {
        text-decoration: none;

        &:hover,
        &:focus,
        &:active,
        &.active {
            color: $sidebar-nav-link-hover-color;
        }
    }

    .active {
        .breadcrumb-link {
            color: $sidebar-nav-link-hover-color;
        }
    }
}

.page-header-element {
    display: none;
    margin-bottom: calc(-1 * #{inspect($element-spacer-y)});

    .page-header {
        line-height: 1em;
        margin-bottom: 0;
    }
}

.page-header-element:not(.d-block)+.element {
    margin-top: 0;
}

// remove containers for child elements
.sidebar__col {
    position: relative;
    margin-top: $element-reduced-spacer-y;
    margin-bottom: $element-reduced-spacer-y;
}

.content-holder__sidebar {
    .row {

        .container,
        .container-fluid {
            padding: 0;
            width: auto;
        }
    }
}

.element {
    .elemental-area {
        .element {

            .container,
            .container-fluid {
                padding: 0;
                width: auto;
            }
        }
    }
}

.element__widget {}

.widget__Site_Widgets_SubmenuWidget {
    .nav-link {
        width: 100%;

        &:hover,
        &:focus,
        &:active,
        &.active {
            font-weight: bold;
            color: $sidebar-nav-link-hover-color;
        }
    }

    .active {
        .nav-link {
            font-weight: bold;
            color: $sidebar-nav-link-hover-color;
        }
    }
}