/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

@layer components {
    .desk-section {
        animation: paper-slide .4s ease both;
        padding-bottom: 2rem;
        border-bottom: 1px dotted rgba(0, 0, 0, 0.1);

        &:last-child {
            border-bottom: none;
        }

        & .desk-section__title {
            font-family: var(--font-typewriter, 'Courier New', Courier, monospace);
            font-size: 1.25rem;
            margin-bottom: 1.25rem;
            color: inherit;
        }

        & .desk-section__content {
            /* Styles for the content container if needed */
        }

        /* Logic for completed state could be handled via data-attributes or classes */
        &[data-state="completed"] {
            opacity: 0.8;
            pointer-events: none;
            filter: grayscale(0.2);
        }
    }

    @keyframes paper-slide {
        from {
            opacity: 0;
            transform: translateY(16px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}