* {
    box-sizing: border-box ;
    margin : 0 ;
    padding: 0 ;
}
html {
    font-family: sans-serif ;
}
.wrapper {
    position:absolute;
    top :0;
    left:0;
    width : 100vw;
    height: 100vh ;
    color:#fff;
    background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
    overflow-y:auto;
}
.timer {
    padding:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
}
.container {
    position:relative;
}
.container::befor {
    content:"";
    position:absolute;
    left:50%;
    top :50%;
    transform:translate(-50%,-50%);
    width :40%;
    height:40%;
    z-index:1;
    background-color:#fff;
}
.container::after {
    content:"";
    position:absolute;
    right:20%;
    top :10%;
    transform:
        translate(50%,-50%) 
        rotate(35deg);
    width :3rem;
    height:1rem;
    border-radius:500px;
    z-index:1;
    background-color:#fff;
}
.container[data-state="press"]::after {
    animation:press 200ms ease-in;
}
@keyframes press {
    0% {
        transform:
        translate(50%,-50%) 
        rotate(35deg);
    }
    50%,80%{
        transform:
        translate(30%,-20%) 
        rotate(35deg);
    }
}
[data-state="running"] .container::after {
    background-color:#fff;
}
.actions {
    padding:1rem;
    display:flex;
    justify-content:center;
    transition:all 200ms ease-out;
}
.actions > * + * {
    margin-left:1rem;
}
.label {
    position:absolute;
    top :50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    z-index:2;
    font-size:2rem;
    transition:all 200ms ease-out;
}
.playpause {
    position:absolute;
    top :50%;
    left:50%;
    width :3rem;
    height:3rem;
    transform:translate(-50%,40%) scale(0.5);
    z-index:15;
    overflow:hidden;
    clip-path:polygon(
        10% 0%,
        90% 50%,
        90% 50%,
        10% 100%
    );
    transition:all 200ms ease-out;
    cursor: pointer;
}
.playpause::before,
.playpause::after {
    content:"";
    position:absolute;
    width :1.5rem;
    height:100%;
    top :0;
    left:0;
    background:#fff;
    pointer-events:none;
    transition:all 200ms ease-out;
}
.playpause::after {
    right:0;
    left:unset;
}

[data-state="idle"] .playpause {
    transform:translate(-50%,-50%);
}

[data-state="running"] .playpause {
    clip-path:polygon(
        0% 0%,
        100% 0%,
        100% 100%,
        0% 100%
    );
}

[data-state="running"] .playpause::before {
    transform:translate(-0.35rem);
}

[data-state="running"] .playpause::after {
    transform:translate(0.35rem);
}

[data-state="idle"] .label {
    opacity:0;
}

[data-state="stop"] .lapbtn {
    transform:scale(0.95);
    pointer-events:none;
    opacity:0.9;
}


.laps {
    padding:1rem;
}

.laps > * + * {
    margin-top:0.5rem;
}

[data-state="idle"] .actions {
    opacity:0;
    pointer-events:none;
    transform:scale(0.5);
}

@keyframes fly-up{
    0% {
        transform:translateY(5rem);
        opacity:0;
    }
    100% {
        transform:translate(0) ;
        opacity:1;
    }
}

button {
    display:inline-block;
    padding:1rem 1rem;
    border-radius:4px;
    border:none;
    background-color:#fff;
    font-weight:bold;
    color:hsl(220 20% 60%);
    transition:all 200ms ease-out;
    width:8rem;
}

button:active {
    animation:pressbtn 100ms ease-out alternate;
}

@keyframes pressbtn {
    to {
        transform:scale(0.9);
    }
}

.lap {
    --r:"00";
    position:relative;
    padding:1.5rem;
    background-color:#fff;
    border-radius:8px;
    animation:fly-up 200ms ease-out;
    font-family:monospace;
    padding-left:5.5rem;
    max-width:24rem;
    margin-left:auto;
    margin-right:auto;
}

.lap::before {
    content: attr(data-rank);
    position:absolute ;
    left:1.25rem;
    top:50%;
    width :3rem;
    height:3rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    transform:translate(0,-50%);
    font-weight:700;
    color:hsl(220 10% 40%);
}

.laptime {
    font-size:1.25rem;
    font-weight:500;
    color:hsl(220 10% 40%);
}

.total {
    font-size:0.8rem;
    color:hsl(220 10% 40%);
}

.lap[data-rank="01"]::before {
    color:hsl(220 80% 50%);
}