@import 'variables';
@import 'mixins';

/* ==========================================================================
   #Comments styles - start
   ========================================================================== */

.edgtf-comment-holder {
    @include edgtfRelativeHolderLayout();

    box-sizing: border-box;
    padding: 0;

    .edgtf-comment-holder-inner {
        padding: 70px 0 20px;
    }

    .edgtf-comment {
        &.edgtf-pingback-comment {
            .edgtf-comment-text {
                padding: 0;
            }
        }
    }

    .edgtf-comment-list {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 150;

        li {
            @include edgtfRelativeHolderLayout();

            margin: 0;
            padding: 48px 0 0;
        }

        > li:first-child {
            border: 0;
            margin: 0;
            padding: 0;
        }

        .children {
            padding: 0 0 0 81px;
        }
    }

    .edgtf-comments-title {
        margin-bottom: 60px;

        > * {
            margin: 0;
        }
    }

    .edgtf-comment-image {
        display: block;
        float: left;
        height: 63px;
        left: 0;
        position: relative;
        top: 10px;
        width: 63px;

        img {
            display: block;
        }
    }

    .edgtf-comment-text {
        min-height: 63px;
        padding: 0 0 0 88px;

        .edgtf-comment-date {
            margin-bottom: 6px;

            @include edgtfInfoSection(true);
        }

        .edgtf-comment-name {
            @include edgtfRelativeHolderLayout();

            margin: 0 0 1px;
        }

        .edgtf-text-holder {
            margin-bottom: 5px;

            p {
                margin: 0;
                padding: 7px 0;
            }
        }

        .replay,
        .comment-reply-link,
        .comment-edit-link {
            margin-right: 10px;

            @include edgtfButtonSimple();
        }

        .comment-respond {
            margin: 10px 0 20px 0;

            .comment-reply-title {
                font-size: 16px;
                margin: 0 0 7px;
            }

            .logged-in-as {
                font-size: 11px;
                margin: 0 0 27px;
            }

            #comment {
                margin-bottom: 24px;
            }
        }

        #cancel-comment-reply-link {
            color: $default-heading-color;
            margin-left: 10px;

            &:hover {
                color: $default-heading-color;
            }
        }

        ul, ol {
            li {
                display: list-item;
            }
        }

        li {
            border: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
        }
    }
}

.edgtf-comment-form {
    box-sizing: border-box;
    clear: both;
    padding: 0;

    .edgtf-comment-form-inner {
        padding: 80px 0 28px;
    }

    .comment-reply-title {
        margin: 0 0 61px;
    }

    .logged-in-as {
        margin: 0 0 8px;
    }
}

@include ipad-portrait {
    .edgtf-comment-holder {
        .edgtf-comment-list {
            .children {
                padding: 0 0 0 40px;
            }
        }
    }
}

@include phone-landscape {
    .edgtf-comment-holder {
        .edgtf-comment-list {
            .children {
                padding: 0;
            }
        }

        .edgtf-comment-text {
            .edgtf-comment-date,
            .edgtf-comment-name {
                float: none;
            }

            .replay,
            .comment-reply-link,
            .comment-edit-link {
                float: none;
                margin: 0 10px 0 0;
            }
        }
    }
}

@include phone-portrait {
    .edgtf-comment-holder {
        .edgtf-comment-image {
            float: none;
        }

        .edgtf-comment-text {
            min-height: inherit;
            padding: 20px 0 0;
        }
    }
}

/* ==========================================================================
   #Comments styles - end
   ========================================================================== */

#respond textarea,
.edgtf-style-form textarea,
#respond input[type='text'],
input[type='text'],
input[type='email'],
input[type='password'],
.post-password-form input[type='password'] {
    @extend %input-style;
}

.post-password-form input[type='password'] {
    margin-top: 10px;
}

.wpcf7-form-control {
    &.wpcf7-text,
    &.wpcf7-number,
    &.wpcf7-date,
    &.wpcf7-textarea,
    &.wpcf7-select,
    &.wpcf7-quiz {
        @extend %input-style;

        footer & {
            margin: 0;
        }
    }
}

#submit_comment,
.post-password-form input[type='submit'],
input.wpcf7-form-control.wpcf7-submit {
    @include edgtfButtonDefaultStyle();
    @include edgtfButtonLargeParams();
    @include edgtfButtonOutlineColor();

    cursor: pointer;
    margin-top: 30px;

    &:hover {
        @include edgtfButtonOutlineHoverColor();
    }
}

input.wpcf7-form-control.wpcf7-submit {
    margin-top: 44px;
}

.wpcf7-form p,
p.form-submit {
    margin: 0;
}

#respond textarea,
.edgtf-style-form textarea,
.wpcf7-form textarea {
    display: block;
    min-width: 100%;
    max-width: 100%;
    padding: $input-padding;
    width: 100%;
}

#respond textarea {
    height: $input-height;
}

.edgtf-two-columns-form-without-space {
    .wpcf7-form .ajax-loader {
        display: none;
    }
}

input[type=text] {
    &::-ms-clear,
    &::-ms-reveal {
        display: none;
        width: 0;
        height: 0;
    }
}

input[type="search"] {
    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
        display: none;
    }
}

/* ==========================================================================
   #Comments styles - end
   ========================================================================== */

/* ==========================================================================
   #Global Owl Slider - begin
   ========================================================================== */
.edgtf-owl-slider {
    visibility: hidden;

    .owl-stage-outer {
        z-index: 1;
    }

    &.edgtf-slider-is-moving {
        .owl-item {
            .edgtf-block-drag-link {
                z-index: -1 !important;
            }
        }
    }

    &.edgtf-slider-has-both-nav {
        .owl-nav {
            .owl-prev,
            .owl-next {
                $pos: calc(-50% - 33px); // 21 is is half height of pagination control + top margin

                @include edgtfTransform(translateY($pos));
            }
        }
    }

    &.edgtf-slider-hide-pagination .owl-dots {
        display: none;
    }

    .owl-nav {
        .owl-prev,
        .owl-next {
            position: absolute;
            top: 50%;
            z-index: 3;

            @include edgtfTransform(translateY(-50%));

            .edgtf-arrow {
                background: url('../img/carousel-arrow.svg');
                background-position: center;
                display: block;
                height: 40px;
                width: 40px;
            }
        }

        .owl-prev {
            left: 30px;

            @include phone-landscape {
                left: 10px;
            }
        }

        .owl-next {
            right: 30px;

            @include phone-landscape {
                right: 10px;
            }

            .edgtf-arrow {
                @include edgtfTransform(scaleX(-1));
            }
        }
    }

    .owl-dots {
        counter-reset: section;
        margin: 34px 0 0;
        text-align: center;

        .owl-dot {
            display: inline-block;
            vertical-align: middle;

            span {
                position: relative;
                color: $default-pagination-color;
                display: inline-block;
                font-size: $button-font-size;
                margin: 0 13px;

                &:before {
                    color: inherit;
                    content: "0" counter(section);
                    counter-increment: section;
                }

                &:after {
                    @include edgtfButtonLine();
                    @include edgtfTransform(scaleX(0));
                    @include edgtfTransformOrigin(100% 50%);
                    @include edgtfTransitionTransform(.4s $default-easing, opacity .4s);
                    opacity: 0;
                    bottom: 4px;
                }
            }

            &:hover,
            &.active {
                span {
                    color: $default-heading-color;

                    &:after {
                        opacity: 1;
                        @include edgtfTransform(scaleX(1));
                        @include edgtfTransformOrigin(0% 50%);
                    }
                }
            }

            &:first-child {
                span {
                    padding-left: 0;
                }
            }

            &:last-child {
                span {
                    padding-right: 0;
                }
            }
        }
    }

    .owl-carousel .owl-item img {
        -webkit-transform: translateZ(0); //chrome text cut off fix
    }

    + .edgtf-slider-thumbnail {
        display: inline-block;
        list-style: none;
        margin: 20px -10px 0;
        vertical-align: middle;

        > .edgtf-slider-thumbnail-item {
            box-sizing: border-box;
            cursor: pointer;
            float: left;
            line-height: 0;
            margin-bottom: 20px;
            padding: 0 10px;

            img {
                border: 2px solid transparent;

                @include edgtfTransition(border-color 0.2s ease-out);
            }

            &.active {
                img {
                    border: 2px solid $default-heading-color;
                }
            }
        }

        $thumbnail_columns_number: ('two', 'three', 'four', 'five', 'six');

        @for $i from 0 to length($thumbnail_columns_number) {
            &.edgtf-slider-columns-#{nth($thumbnail_columns_number,$i+1)} {

                .edgtf-slider-thumbnail-item {
                    width: 100% / ($i+2);

                    @include ipad-landscape {
                        width: 33.3333%;
                    }
                }
            }
        }
    }
}

/* ==========================================================================
   #Global Owl Slider - end
   ========================================================================== */

/* ==========================================================================
   #404 styles - start
   ========================================================================== */

.error404 {
    .edgtf-wrapper {
        padding: 0 !important;
    }

    .edgtf-content {
        height: 100vh;
    }

    &.admin-bar {
        .edgtf-content {
            height: calc(100vh - 32px);
        }
    }

    .edgtf-content-inner {
        @include edgtfTableLayout();
    }

    .edgtf-page-not-found {
        @include edgtfTableCellLayout();

        padding: 0 20%;
        text-align: center;

        .edgtf-404-title {
            margin: 0;
            margin: 0;
        }

        .edgtf-404-subtitle {
            margin: 35px 0 0;
        }

        .edgtf-404-text {
            margin: 10px 0 0;
        }

        .edgtf-btn {
            margin: 30px 0 0;

            &.edgtf-btn-light-style {
                background-color: #fff;
                border-color: #fff;
                color: #585858;

                &:hover {
                    background-color: transparent !important;
                    border-color: #fff !important;
                    color: #fff !important;
                }
            }
        }
    }

    @include ipad-landscape {
        .edgtf-content {
            height: 100vh;
            margin-top: -70px !important;
        }
    }
}

/* ==========================================================================
   #404 styles - end
   ========================================================================== */

/* ==========================================================================
   #Back to Top styles - start
   ========================================================================== */
#edgtf-back-to-top {
    $back-to-top-size: 40px;

    background-color: $default-heading-color;
    bottom: 25px;
    display: block;
    height: $back-to-top-size;
    margin: 0;
    opacity: 0;
    position: fixed;
    right: 25px;
    visibility: hidden;
    width: $back-to-top-size;
    z-index: 10000;

    &:before {
        background: url(../../framework/modules/header/assets/img/menu-arrow.svg) center no-repeat;
        content: '';
        display: block;
        height: $back-to-top-size;
        left: 0;
        position: absolute;
        top: 0;
        width: $back-to-top-size;

        @include edgtfTransform(rotate(-90deg));
    }

    &:hover {
        opacity: $default-hover-opacity !important;
    }

    &.off {
        opacity: 0;
        visibility: hidden;

        @include edgtfTransition(opacity 0.15s ease, visibility .0s .15s);
    }

    &.on {
        opacity: 1;
        visibility: visible;

        @include edgtfTransition(opacity 0.3s ease);
    }
}

/* ==========================================================================
   #Back to Top styles - end
   ========================================================================== */

/* ==========================================================================
    #Custom Cursor styles - start
    ========================================================================== */

.edgtf-custom-cursor-enabled {
    $cursor-size: 14px;
    $cursor-hover-size: 18px;

    html:not(.touch) & * {
        cursor: none !important;
    }

    #edgtf-cursor-dot-holder {
        position: fixed;
        top: -$cursor-size/2;
        left: -$cursor-size/2;
        height: $cursor-size;
        width: $cursor-size;
        pointer-events: none;
        z-index: 99999; // to be visible over wp admin bar
        will-change: transform;

        &.edgtf-hovering {
            top: -$cursor-hover-size/2;
            left: -$cursor-hover-size/2;
            height: $cursor-hover-size;
            width: $cursor-hover-size;
        }
    }

    #edgtf-cursor-dot {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 50%;
        outline: 1px solid transparent;
        background-color: $default-heading-color;

        &.edgtf-invert {
            background-color: #fff;
        }

        $offset: 120;
        &.edgtf-scale-up {
            top: -$offset*1vw;
            top: -$offset*1vmax;
            left: -$offset*1vw;
            left: -$offset*1vmax;
            bottom: -$offset*1vw;
            bottom: -$offset*1vmax;
            right: -$offset*1vw;
            right: -$offset*1vmax;
        }

        $in: .5s;
        &.edgtf-transition-in {
            @include edgtfTransition(
                            top $in $default-easing,
                            left $in $default-easing,
                            bottom $in $default-easing,
                            right $in $default-easing
            );
        }

        $out: 1s;
        &.edgtf-transition-out {
            @include edgtfTransition(
                            top $out $default-easing,
                            left $out $default-easing,
                            bottom $out $default-easing,
                            right $out $default-easing
            );
        }

        &.edgtf-fade-cursor {
            opacity: 0;
        }
    }

    //custom
    &.edgtf-fullscreen-menu-opened #edgtf-cursor-dot {
        background-color: #fff;
    }
}

/* ==========================================================================
    #Custom Cursor styles - end
    ========================================================================== */

/* ==========================================================================
   #Self Hosted Video styles - begin
   ========================================================================== */
.edgtf-self-hosted-video-holder {
    .edgtf-video-wrap {
        .mejs-poster,
        .mejs-container,
        .mejs-overlay-play {
            height: 100% !important; /*!important because of the inline style*/
            width: 100% !important; /*!important because of the inline style*/
        }
    }
}

/* ==========================================================================
   #Self Hosted Video styles - end
   ========================================================================== */