:root {
    --border-radius: 1.25rem;
    --box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    --border: 1px solid rgba(255, 255, 255, 0.3);
    --card-padding: 1rem;
    --card-padding-dense: 0.5rem;
}


#wrapper {
    min-height: 100lvh;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1.25rem;
    align-content: center;
    background: linear-gradient(45deg, rgb(65, 89, 208) 0%, rgb(200, 79, 192) 50%, rgb(255, 205, 112) 100%);

    > .card {
        width: 1024px;
        max-width: 100%;
    }
}

.card {
    padding: var(--card-padding);

    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: var(--border);

    .card__title {
        padding-bottom: var(--card-padding);
    }

    &.card--dense {
        --card-padding: var(--card-padding-dense);
    }

    .card__content {
        gap: 1rem;
    }

    .card__title + .card__content {
        padding-top: var(--card-padding);
    }
}

.textarea {
    display: flex;
    position: relative;

    flex-grow: 1;

    textarea {
        padding: 2rem 1rem 1rem 1rem;
        resize: none;
        border: none;

        flex-grow: 1;

        &[readonly] {
            pointer-events: none;
        }
    }

    label {
        position: absolute;
        top: 1rem;
        left: 1.5rem;

        font-size: 0.9rem;
        color: rgba(0, 0, 0, 0.9);
        transition: all 150ms;

        &:has(+ textarea:focus) {
            font-size: 0.6rem;
            color: rgba(0, 0, 0, 0.7);
        }
    }

    + .textarea {
        margin-left: 8px;
    }
}

textarea, input {
    border-radius: var(--border-radius);
    background: transparent;
    border: none;
}

input {
    border: var(--border);
    box-shadow: var(--box-shadow);
}

label {
    margin-right: 0.5rem;
}

.input {
    &.input--api {
        display: flex;
        align-items: center;
        padding-right: var(--card-padding);

        &,
        input {
            flex-grow: 1;
            padding-left: var(--card-padding);
        }
    }
}

button {
    border-radius: var(--border-radius);
    background: transparent;
    box-shadow: var(--box-shadow);
    border: var(--border);
    padding: 4px 12px;

    &:not([disabled]) {
        .float {
            display: none;
        }

        .text {
            display: flex;
        }

        &:active, &:hover {
            backdrop-filter: hue-rotate(180deg);
            cursor: pointer;
        }

    }


    &[disabled] {
        .float {
            display: flex;
        }

        .text {
            display: none;
        }
    }
}

.output-card {
    position: relative;
}

#clipboard {
    position: absolute;
    bottom: 8px;
    right: 8px;

     img {
         width: 20px;
         height: 20px;
     }
}

#submit {
    height: 32px;
    width: 64px;
    align-items: center;
    justify-content: center;
}

/* Float */
.float {
    display: flex;
    gap: 3px;
    align-items: center;
}

.float-dot {
    width: 6px;
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    animation: float 1.8s ease-in-out infinite;
}

.float-dot:nth-child(1) { animation-delay: 0s; }
.float-dot:nth-child(2) { animation-delay: 0.3s; }
.float-dot:nth-child(3) { animation-delay: 0.6s; }

@keyframes float {
    0%, 100% { transform: translateY(4px); }
    50% { transform: translateY(-4px); }
}