/*
 * 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-tab {
        position: relative;
        padding: 1rem 1.5rem 1rem;
        font-family: var(--font-typewriter, 'Courier New', Courier, monospace);
        font-size: 0.85rem;
        font-weight: bold;
        text-transform: uppercase;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-bottom: none;
        border-radius: 8px 8px 0 0;
        margin-right: -10px;
        cursor: default;
        transition: transform 0.3s ease, z-index 0.3s ease;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.6);

        &.desk-tab--manila { background-color: #f3e5ab; }
        &.desk-tab--green { background-color: #c8d5bb; }
        &.desk-tab--blue  { background-color: #b9ceda; }
        &.desk-tab--red   { background-color: #d8b4b4; }

        /* Fill the gap between tab and paper (especially for inactive ones which might have 1px alignment issues) */
        &::after {
            content: '';
            position: absolute;
            bottom: -4px; /* Slight overlap into the paper */
            left: -1px;
            right: -1px;
            height: 8px;
            background: inherit;
            border-left: 1px solid rgba(0, 0, 0, 0.15);
            border-right: 1px solid rgba(0, 0, 0, 0.15);
            z-index: 1;
        }

        &.is-active {
            z-index: 10;
            transform: translateY(-16px);
            color: rgba(0, 0, 0, 0.9);
            box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15);

            &::after {
                bottom: -17px; /* Bigger overlap when lifted */
                height: 17px;
            }
        }

        &:not(.is-active) {
            filter: brightness(0.9);
            transform: translateY(0);
        }

        & .desk-tab__text {
            position: relative;
            z-index: 5;

            @media (max-width: 480px) {
                font-size: 0.7rem;
            }
        }

        & .desk-tab__paperclip {
            display: none;
            position: absolute;
            top: -15px;
            right: 15px;
            width: 14px;
            height: 40px;
            border: 2px solid #a0a0a0;
            border-radius: 10px;
            background: transparent;
            z-index: 20;
            pointer-events: none;
            box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

            &::after {
                content: '';
                position: absolute;
                top: 5px;
                left: 2px;
                width: 6px;
                height: 25px;
                border: 2px solid #808080;
                border-left: none;
                border-radius: 0 5px 5px 0;
            }

            &::before {
                content: '';
                position: absolute;
                top: 10px;
                left: -4px;
                width: 18px;
                height: 2px;
                background: rgba(0,0,0,0.1);
                box-shadow: 0 15px 0 rgba(0,0,0,0.1);
            }
        }

        &.is-done .desk-tab__paperclip {
            display: block;
            animation: clip-drop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
        }
    }
}