.coin {
    --button-bgPrimay: var( --primary-dark-600);
    --Text-primaryNoneBg : var(--opacity-70b);
}

@media (prefers-color-scheme: dark) {
.coin {
        --button-bgPrimay: var( --primary-dark-600);
        --Text-primaryNoneBg : var(--base-white);
    }
}


.coin {
    display: inline-flex;
    justify-content: flex-start;
    height: 1.5rem;
    padding: 0rem 0.5rem;
    align-items: center;
    flex-shrink: 0;

    border-radius: 1.1rem;
    border: 1px solid #5F5F5F;
    position: relative;
    box-sizing: border-box;
    color: var(--Text-primaryNoneBg);
}


.coin[iconleft] {
    padding-left: 0;
}

.coin[iconright] {
    padding-right: 0;
}


.coin::before,
.coin::after {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    overflow: hidden;

    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-image: var(--coin-image-url);
}

.coin[iconleft]::before {
    content: '';
}

.coin[iconright]::after {
    content: '';
}

.coin>button {
    display: flex;
    transform: rotate(-0.179deg);
    padding: 0.125rem 0.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 6.25rem;
    background: var(--button-bgPrimay);
    border: 0;
    order: 4;
    margin-left: min(0.01rem, 1px);

    color: var(--Text-primaryNoneBg);
}


.coin:has(button) {
    padding-right: 0.01rem !important;
}