.auth-btns {
    position: relative;
    height: 40px;
    overflow: hidden;
    background: transparent;
}

.auth-btns__btn {
    position: absolute; top: 0; height: 100%; width: 60%;
    display: flex; align-items: center; justify-content: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer; user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: filter var(--transition);
}

.auth-btns__btn--login {
    left: 0;
    background-color: transparent;
    clip-path: polygon(0 0, calc(91.66% - 2px) 0, calc(75% - 2px) 100%, 0 100%);
    z-index: 1;
}

.auth-btns__btn--register {
    right: 0;
    background-color: transparent;
    clip-path: polygon(calc(25% + 2px) 0, 100% 0, 100% 100%, calc(8.33% + 2px) 100%);
    z-index: 1;
}

.auth-btns__btn span {
    color: #fff; font-size: 0.95rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    text-align: center; line-height: 1.15; pointer-events: none;
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    text-overflow: ellipsis; word-break: break-word;
}

.auth-btns__btn--login span { padding-right: 12%; }
.auth-btns__btn--register span { padding-left: 12%; }

.auth-btns__btn:active { filter: brightness(.88); }
@media (hover: hover) { .auth-btns__btn:hover { filter: brightness(1.08); } }

@media (max-width: 360px) {
    .auth-btns { height: 34px; }
    .auth-btns__btn span { font-size: 0.85rem; }
}