.cardabalet-primordial {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
    width: 150px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #0f63e6;
    background-image: linear-gradient(
315deg
, #1162e0 0%, #08baea 74%);
    border: none;
    border-radius: 10px;
    color: #fbf2f2;
    font-weigth: bold;
    font-size: 15px;
}

.btn-text {
    margin-left: 20px;
}

button svg {
    position: absolute;
    transform: translateX(-10px) translateY(-50%);
}

.upload-icon svg {
    fill: rgba(255,255,255,0.8);
}

.check-icon svg {
    position: absolute;
    transform: translateX(-40px) translateY(-50%);
    fill: rgba(255,255,255,0);
}

button:focus {
    outline: none;
}

button:hover {
    filter: brightness(1.1);
}

button:focus::before {
    animation: progress 2s forwards;
}

button:focus .check-icon svg {
    animation: iconShow 200ms 2.2s forwards;
}

button:focus .upload-icon svg {
    animation: iconHide 200ms 2s forwards;
}

button::before {
    height: 5px;
    width: 0px;
    border-radius: 0px 0px 10px 10px;
    background-color: #ffffff;
    background-image: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
    position: absolute;
    content: '';
    transform: translateY(20px) translateX(3px);
}

@keyframes progress {
    to {width: 144px;}
}

@keyframes iconHide {
    to {fill: rgba(255,255,255,0);}
}

@keyframes iconShow {
    to {fill: rgba(255,255,255,0.8);}
}