/*------------------------------------------------------------------
[8.7 - Homepage]
*/
%home-line-style {
    width: 600px;
    height: 600px;
    top: 30px;
    background-repeat: no-repeat;
    opacity: .1;
    z-index: -2;
}

.home-header-area {
    .home-line-start {
        @extend %home-line-style;
        left: 5px;
    }

    .home-line-end {
        @extend %home-line-style;
        right: 5px;
    }

    .uploader-card {
        @include transition(transform 1s ease);

        &:hover {
            transform: scale(1.05);
        }
    }

    .title {
        color: var(--color-3);
        font-weight: 800;

        @media (min-width: $breakpoint-medium) {
            font-size: 3rem;
        }

        @media (min-width: $breakpoint-small) and (max-width: $breakpoint-md) {
            font-size: 2.5rem;
        }
    }

    .text {
        color: var(--color-3);
        font-weight: 300;

        @media (min-width: $breakpoint-medium) {
            font-size: 1.25rem;
        }

        @media (min-width: $breakpoint-small) and (max-width: $breakpoint-md) {
            font-size: 1.125rem;
        }
    }

    .upload-methods {
        a {
            color: var(--color-3);
            font-weight: 600;

            &.active {
                color: var(--color-1);
            }
        }
    }

    .link-area {
        border-radius: 1rem;
        border: 2px dashed var(--color-1);
        color: var(--color-3);

        #file-url {
            resize: none;
        }
    }

    @media (min-width: $breakpoint-small) {
        .mobile-options {
            display: none;
        }
        
        .advanced-options {
            display: none;
            border-radius: 1rem;
            max-height: 0;
            transition: max-height 1s ease-out;
            overflow: hidden;
    
            &.show {
                display: inline-flex;
                max-height: 500px;
                transition: max-height 1s ease-in;
            }
    
            .btn {
                background: var(--color-4);
                color: var(--color-3);
                border-color: var(--color-4);
    
                &:hover i {
                    color: var(--color-1);
                }
            }
        }
    }

    @media (max-width: $breakpoint-sm) {
        .advanced-options {
            display: none;
        }
        
        .mobile-options {
            display: none;
            max-height: 0;
            transition: max-height 1s ease-out;
            overflow: hidden;
    
            &.show {
                display: inline-flex;
                max-height: 500px;
                transition: max-height 1s ease-in;
            }
        }
    }

    .home-slider {
        bottom: 17%;
        left: 0;
        width: 100%;
        z-index: -1;

        .swiper-wrapper {
            transition-timing-function: linear;
        }

        .swiper-slide {
            width: 22.25rem;
            height: 12.5rem;
            background-color: var(--color-4);
            border-radius: 1rem;
        }
    }
}

.home-features-area {
    .feature-container:not(:last-child) {
        margin-bottom: 8rem;
    }

    .feature-image {
        height: 18rem;
        border-radius: 1rem;

        @media (min-width: $breakpoint-small) {
            width: 26rem;
        }

        @media (max-width: $breakpoint-sm) {
            width: 22rem;
        }
    }

    .feature-title {
        font-weight: 700;
        color: var(--color-3);

        @media (min-width: $breakpoint-small) {
            font-size: 2rem;
        }
    }
}
