.myButton {
    --button-bgPrimay: var(--primary-light-500);
    --button-bgActive: var(--primary-light-500);
    --button-bgDisabled: var(--opacity-70b);
    --button-bgWarning: var(--warnning-500);
    --button-bgSecondary: var(--opacity-10b);
    --button-bgPrimayHover: var(--primary-light-500);
    --button-bgSecondaryHover: var(--opacity-30b);
    --button-borderPrimary: var(--primary-light-600);
    --button-borderSecondary: var(--opacity-70b);
    --button-borderDisable: var(--opacity-30b);
    --button-primayBgNodeRunner: var(--success-100);
    --button-textPrimaryNunebg: var(--opacity-70b);
    --button-textPrimaryOnbg: var(--base-white);
    --button-textSecondary: var(--primary-light-600);
    --button-textDisabled: var(--neutral-500);
    --button-iconPrimaryNonebg: var(--neutral-100);
    --button-iconPrimaryOnbg: var(--neutral-100);
    --button-iconDisabled: var(--neutral-500);
}

@media (prefers-color-scheme: dark) {
    .myButton {
        --button-bgPrimay: var(--primary-dark-600);
        --button-bgActive: var(--primary-dark-500);
        --button-bgDisabled: var(--opacity-70b);
        --button-bgWarning: var(--warnning-500);
        --button-bgSecondary: var(--opacity-10w);
        --button-bgPrimayHover: var(--primary-dark-500);
        --button-bgSecondaryHover: var(--opacity-15w);
        --button-borderPrimary: var(--primary-dark-600);
        --button-borderSecondary: var(--opacity-50w);
        --button-borderDisable: var(--opacity-30b);
        --button-primayBgNodeRunner: var(--success-100);
        --button-textPrimaryNunebg: var(--opacity-90w);
        --button-textPrimaryOnbg: var(--base-white);
        --button-textSecondary: var(--primary-dark-600);
        --button-textDisabled: var(--neutral-800);
        --button-iconPrimaryNonebg: var(--neutral-800);
        --button-iconPrimaryOnbg: var(--neutral-800);
        --button-iconDisabled: var(--neutral-800);
    }
}





.myButton {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;


    text-align: center;

    background: transparent;

    border: 0;
    cursor: pointer;
    box-sizing: border-box;
}






.myButton.large {
    height: 3rem;
    min-width: 3rem;
    padding: 0.75rem;

    border-radius: 0.5rem;
}

.myButton.medium {
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0.75rem;

    border-radius: 0.375rem;
}

.myButton.small {
    height: 2rem;
    min-width: 2.125rem;
    padding: 0.25rem;

    border-radius: 0.5rem;
}

.myButton.xsmall {
    height: 1.5rem;
    min-width: 1.5rem;
    padding: 0rem 0.25rem;

    border-radius: 1.5625rem;
}

.myButton.xsmall-14 {
    height: 1.5rem;
    min-width: 1.5rem;
    padding: 0rem 0.375rem;

    border-radius: 1.5625rem;
}





.myButton>span {
    display: flex;

    justify-content: center;
    align-items: center;
}


.myButton.large>span {
    padding: 0rem 0.5rem;
}

.myButton.medium>span {
    padding: 0rem 0.5rem;
}

.myButton.small>span {
    padding: 0rem 0.25rem;
}

.myButton.xsmall>span {
    padding: 0rem 0.25rem;
}

.myButton.xsmall-14>span {
    padding: 0rem 0.25rem;
}


.myButton {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.myButton:hover {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}



.myButton.primary {
    border: 0.075rem solid var(--button-bgPrimay);
    color: var(--button-textPrimaryOnbg);
    background: var(--button-bgPrimay);
}

.myButton.primary:hover {
    border: 0.075rem solid var(--button-bgPrimayHover);
    color: var(--button-textPrimaryOnbg);
    background: var(--button-bgPrimayHover);
}

.myButton.primary[disabled] {
    border: 0.075rem solid var(--button-bgDisabled);
    color: var(--button-textDisabled);
    background: var(--button-bgDisabled);
}

.myButton.primary.warning {
    border: 0.075rem solid var(--button-bgWarning);
    color: var(--button-textPrimaryOnbg);
    background: var(--button-bgWarning);
}






.myButton.secondary {
    border: 0.075rem solid var(--button-bgSecondary);
    color: var(--button-textPrimaryOnbg);
    background: var(--button-bgSecondary);
}

.myButton.secondary:hover {
    border: 0.075rem solid var(--button-bgSecondaryHover);
    color: var(--button-textPrimaryOnbg);
    background: var(--button-bgSecondaryHover);
}

.myButton.secondary[disabled] {
    border: 0.075rem solid var(--button-bgDisabled);
    color: var(--button-textDisabled);
    background: var(--button-bgDisabled);
}




.myButton.main-outline {
    border: 0.075rem solid var(--button-borderPrimary);
    color: var(--button-borderPrimary);
}

.myButton.main-outline:hover {
    border: 0.075rem solid var(--button-borderPrimary);
    color: var(--button-borderPrimary);
}

.myButton.main-outline[disabled] {
    border: 0.075rem solid var(--button-bgPrimay);
    color: var(--button-textDisabled);
}

.myButton.main-outline.warning {
    border: 0.075rem solid var(--button-bgWarning);
    color: var(--button-bgWarning);
}




.myButton.grey-outline {
    border: 0.075rem solid var(--button-borderSecondary);
    color: var(--button-textPrimaryNunebg);
}

.myButton.grey-outline:hover {
    border: 0.075rem solid var(--button-borderSecondary);
    color: var(--button-textPrimaryNunebg);
}

.myButton.grey-outline[disabled] {
    border: 0.075rem solid var(--button-borderDisable);
    color: var(--button-textDisabled);
}



.myButton.text {
    border: 0.075rem solid transparent;
    color: var(--button-textPrimaryNunebg);
}

.myButton.text:hover {
    border: 0.075rem solid transparent;
    color: var(--button-textPrimaryNunebg);
}

.myButton.text[disabled] {
    border: 0.075rem solid transparent;
    color: var(--button-textDisabled);
}

.myButton.text.warning {
    border: 0.075rem solid transparent;
    color: var(--button-bgWarning);
}





.myButton::before,
.myButton::after {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'dr-odds';

}

.myButton[iconleft]::before {
    content: attr(iconleft);
}

.myButton[iconright]::after {
    content: attr(iconright);
}


.myButton[iconleft].large::before,
.myButton[iconright].large::after {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.2rem;
    line-height: 1.5rem;
}


.myButton[iconleft].medium::before,
.myButton[iconright].medium::after {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.2rem;
    line-height: 1.5rem;
}

.myButton[iconleft].small::before,
.myButton[iconright].small::after {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.2rem;
    line-height: 1.5rem;
}

.myButton[iconleft].xsmall-14::before,
.myButton[iconright].xsmall-14::after {
    width: 1rem;
    height: 1rem;
    font-size: 0.875rem;
    line-height: 1rem;
}

.myButton[iconleft].xsmall-14::before,
.myButton[iconright].xsmall-14::after {
    width: 1rem;
    height: 1rem;
    font-size: 0.875rem;
    line-height: 1rem;
}