toggle-cover {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

toggle-btn-box {
    position: relative;
    border-radius: 80px;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    background-color: rgba(25, 25, 25, 0.75);
    transition: 0.4s cubic-bezier(0.5, 0, 0.5, 1);
    margin-bottom: 12.5vh;
}

toggle-btn-box[mode="loading"] {
    width: 64px;
    height: 64px;
}

toggle-btn-box[mode="btn"] {
    width: 225px;
    height: 64px;
}

toggle-btn-box[mode="btn"] > tgb-loading {
    opacity: 0;
}

toggle-btn-box[mode="loading"] > tgb-key {
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

tgb-loading, tgb-key {
    position: absolute;
    top: 50%;
}

tgb-loading {
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    transition: 0.15s ease;
}

tgb-key {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    box-shadow: 0 0 5px 2.5px rgba(0, 0, 0, 0.15);
}

tgb-key[transition="true"] {
    transition: 0.5s ease;
}

tgb-key[lock="true"] {
    left: 0%;
    transform: translate(7.5px, -50%);
    background-color: rgb(255, 107, 107);
}

tgb-key[lock="false"] {
    left: calc(100% - 64px);
    transform: translate(7.5px, -50%);
    background-color: rgb(52, 157, 255);
}

tgb-key > svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: 0.5s cubic-bezier(0.2, 0, 0, 1);
}

tgb-key[lock="true"] > svg[type="true"], tgb-key[lock="false"] > svg[type="false"] {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}