.app-container {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.app-container .app-title {
    text-align: center;
    padding: 3rem 0 2rem 0;

    .name {
        font-size: 2.5rem;
        background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
        color: transparent;
        background-clip: text;
    }

    .slogan {
        font-size: 1.25rem;
        color: hsl(var(--muted-foreground));
    }
}

.card {
    background-color: hsl(var(--card) / .8);
    padding: 2rem;
    border: solid 1px hsl(var(--border));
    border-radius: var(--radius);
}


#upload-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.upload-area {
    text-align: center;
    padding: 3rem;
    border: dashed 2px hsl(var(--border));
    border-radius: var(--radius);
    position: relative;
    transition: all 0.2s linear;

    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    &:hover, &.highlight {
        border-color: hsl(var(--primary) / .5);
    }

    &.hidden {
        display: none;
    }
}


.upload-area .container .icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: hsl(var(--primary));
    background: hsl(var(--primary) / .1);
    border-radius: 9999px;
    justify-content: center;
    display: flex;
    align-items: center;
    width: 4rem;
    height: 4rem;
}

.upload-area .text {
    font-size: 1.2rem;
    color: hsl(var(--foreground));
    .subtitle {
        font-size: 1rem;
        color: hsl(var(--foreground) / .7);
    }
}



.upload-area input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}


/* ###################################### */
/*       FILES                            */
/* ###################################### */

#form-fields.disabled {
    pointer-events: none;
    opacity: 0.25;

    .selected-files #selected-files-list {
        display: none;
    }
}

.selected-files {
    display: flex;
    flex-direction: column;
    gap: 1rem;

}

#selected-files-list {
    max-height: 24rem;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: solid 2px hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--border));

    .file-item {
        background: hsl(var(--card));
        padding: 1rem;
        display: flex;
        align-items: center;
        
        .file-icon {
            display: flex;
            margin-right: 0.75rem;
        }
        .file-info {
            flex: 1;
            width: 15rem;

            .file-name {
                font-size: 0.9rem;
                word-break: break-all;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
            .file-size {
                font-size: 0.8rem;
                color: hsl(var(--muted-foreground));
            }
        }
        .file-remove {
            display: flex;
            background: none;
            color: hsl(var(--primary));
            border-radius: 9999px;
            border: none;
            cursor: pointer;
            padding: 0.25rem;
            transition: all 0.2s;

            &> svg {
                stroke: hsl(var(--primary));
            }
            &:hover {
                transform: rotate(90deg);
            }
        }
    }
}






.upload-more {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    border: 2px solid hsl(var(--primary));
    border-radius: var(--radius);
    transition: all .15s linear;
    background: hsl(var(--primary) / .05);
    font-size: 1.15rem;
    line-height: 1.25rem;
    outline: none;
    color: hsl(var(--card-foreground));

    .count {
        display: flex;
        align-items: center;
        gap: .75rem;
        .file-info {
            display: flex;
            flex-direction: column;

            .file-name {
                font-size: 1rem;
                word-break: break-all;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
            .file-size {
                font-size: .75rem;
                color: hsl(var(--muted-foreground));

            }

        }
    }

    #upload-more-btn {
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 1rem;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
        background: hsl(var(--primary));
        color: hsl(var(--primary-foreground));
    }
}















/* ###################################### */
/* ###################################### */

.link-expiry {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .icon {
        font-weight: 500;
        font-size: .875rem;
        line-height: 1.25rem;
        gap: .5rem;
        align-items: center;
        display: flex;

        svg {
            width: 1rem;
            height: 1rem;
        }
    }

    .expiry-choices {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
}

.link-expiry .expiry-choices > * {
    padding: 1rem;
    border: solid 2px hsl(var(--border));
    border-radius: var(--radius);
    transition: all .15s linear;
    background: transparent;
    flex: 1;
    min-width: 6rem;
    cursor: pointer;

    &:hover {
        border-color: hsl(var(--primary) / .5);
    }

    .title {
        font-weight: 700;
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .subtitle {
        color: hsl(var(--muted-foreground));
        font-size: .75rem;
        line-height: 1rem;
    }


    &.selected {
        color: hsl(var(--primary));
        font-weight: 500;
        border-color: hsl(var(--primary));
        background-color: hsl(var(--primary) / .05);
    }
}



/* ###################################### */
/*       FORMS                            */
/* ###################################### */

#form-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.form-text-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .label {
        font-weight: 500;
        font-size: .875rem;
        line-height: 1.25rem;
        gap: .5rem;
        align-items: center;
        display: flex;
        svg {
            height: 1rem;
            width: 1rem;
            stroke: hsl(var(--card-foreground)) !important;
        }
    }
}


input[type="text"], input[type="email"], input[type="password"] {
    padding: 1rem;
    border: solid 2px hsl(var(--border));
    border-radius: var(--radius);
    transition: all .15s linear;
    background: transparent;
    font-size: 1rem;
    outline: none;
    

    &:hover {
        border-color: hsl(var(--primary) / .5);
    }
    &:focus, &:active, &:target {
        border-color: hsl(var(--primary));
        background-color: hsl(var(--primary) / .05);
    }
}

.form-actions .btn-primary {
    width: 100%;
    border: none;
    padding: 1rem;
    border-radius: var(--radius);
    transition: all .15s linear;
    background: hsl(var(--primary));
    font-size: 1.15rem;
    line-height: 1.25rem;
    padding-left: 2rem;
    padding-right: 2rem;
    outline: none;
    color: hsl(var(--white));
    font-weight: 700;

    &:hover {
        background-color: hsl(var(--primary) / .9);
    }
}





/* ###################################### */
/*       FOOTER                           */
/* ###################################### */



.app-footer {
    padding: 2rem 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;

    .card {
        background: transparent;
        border: none;
        flex: 1;
        min-width: 9rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        text-align: center;

        .icon {
            border-radius: 9999px;
            justify-content: center;
            align-items: center;
            width: 3rem;
            height: 3rem;
            display: flex;

            svg {
                width: 1.5rem;
                height: 1.5rem;
            }

            &.purple {
                background-color: hsl(var(--primary) / .1);
                color: hsl(var(--primary));
            }
            &.pink {
                background-color: hsl(var(--accent) / .1);
                color: hsl(var(--accent));
            }
        }

        h3 {
            font-weight: 600;
            font-size: 1.25rem;
        }
        p {
            color: hsl(var(--muted-foreground));
            font-size: .875rem;
            line-height: 1.25rem;
        }
    }
}