@keyframes base-button-ani {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.base-button {
    font-family: Inter,sans-serif;
    font-style: normal;
    position: relative;
    font-weight: 600;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    min-height: var(--height);
    transition: background .1s ease-in-out,color .1s ease-in-out
}

.base-button[disabled] {
    transition-duration: .2s;
    transition-delay: .2s
}

.base-button svg {
    display: block;
    height: auto;
    width: 16px
}

.base-button:after {
    content: "";
    display: block;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    left: calc(50% - .9em);
    top: calc(50% - .9em);
    border: .15em solid transparent;
    border-radius: 50%;
    animation: base-button-ani .7s linear infinite;
    opacity: 0;
    transition: opacity .1s ease-in-out
}

.base-button--size-xl {
    --height: 56px;
    font-size: 15px;
    padding: 16px;
    border-radius: 6px
}

.base-button--size-l {
    --height: 48px;
    font-size: 15px;
    padding: 14px 16px;
    border-radius: 6px
}

.base-button--size-m {
    --height: 40px;
    font-size: 15px;
    padding: 10px 16px;
    border-radius: 6px
}

.base-button--size-s {
    --height: 32px;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 4px
}

.base-button--variant-primary-yellow {
    background: #ffd618;
    color: #161a22
}

.base-button--variant-primary-yellow:hover {
    background: #ffbf00
}

.base-button--variant-primary-yellow:focus {
    box-shadow: 0 0 0 3px #ffd61852
}

.base-button--variant-primary-yellow[disabled] {
    color: #161a22;
    background: rgba(255,214,24,.5)
}

.base-button--variant-primary-yellow:after {
    border-right-color: #161a22
}

.base-button--variant-primary-white {
    background: rgba(138,168,229,.08);
    color: #fff;
    border: 1px solid transparent
}

.base-button--variant-primary-white:hover {
    background: rgba(138,168,229,.12)
}

.base-button--variant-primary-white:focus {
    box-shadow: 0 0 0 3px #8aa8e529
}

.base-button--variant-primary-white[disabled] {
    color: #ffffff52;
    background: rgba(138,168,229,.12)
}

.base-button--variant-primary-white.base-button--active {
    border: 1px solid #ffffff
}

.base-button--variant-primary-white:after {
    border-right-color: #fff
}

.base-button--variant-secondary-yellow {
    color: #ffd618;
    border: 1px solid rgba(255,214,24,.32)
}

.base-button--variant-secondary-yellow:hover {
    background: rgba(255,214,24,.32)
}

.base-button--variant-secondary-yellow:focus {
    box-shadow: 0 0 0 3px #ffd61852
}

.base-button--variant-secondary-yellow[disabled] {
    background: transparent;
    border: 1px solid rgba(255,255,255,.06);
    color: #ffffffa3
}

.base-button--variant-secondary-yellow:after {
    border-right-color: #ffd618
}

.base-button--variant-secondary-white {
    color: #fff;
    border: 1px solid rgba(255,255,255,.16)
}

.base-button--variant-secondary-white:hover {
    background: rgba(138,168,229,.08)
}

.base-button--variant-secondary-white:focus {
    box-shadow: 0 0 0 3px #8aa8e529
}

.base-button--variant-secondary-white[disabled] {
    background: transparent;
    border: 1px solid rgba(255,255,255,.06);
    color: #ffffffa3
}

.base-button--variant-secondary-white.base-button--active {
    background: rgba(138,168,229,.08);
    border: 1px solid #ffffff
}

.base-button--variant-secondary-white:after {
    border-right-color: #fff
}

.base-button--variant-ghost {
    color: inherit;
    border: 1px solid transparent;
    padding: 0 8px
}

.base-button--variant-ghost:hover {
    background: rgba(255,255,255,.06)
}

.base-button--variant-ghost:focus {
    box-shadow: 0 0 0 2px #ffffff0f
}

.base-button--variant-ghost[disabled] {
    background: transparent;
    opacity: .32
}

.base-button--icon {
    flex: 0 0 auto;
    padding: 0;
    height: var(--height);
    aspect-ratio: 1
}

.base-button--icon svg {
    width: 16px
}

.base-button--rounded {
    border-radius: 100px
}

.base-button--loading,.base-button--loading[disabled] {
    color: transparent
}

.base-button--loading:after,.base-button--loading[disabled]:after {
    transition-duration: .3s;
    transition-delay: .3s;
    opacity: 1
}