@import "./colors.css";

.button {
    border-radius: 8px;
    display: flex;
    gap: 10px;
    padding: 16px 40px 16px 40px;
    transition: 0.3s ease-out;
    border: none;
    width: fit-content;
    cursor: pointer;
}

.button:hover {
    transition: 0.3s ease-out;
}

.button.button-light-blue {
    background-color: var(--mrcoin-light-blue);
    color: var(--mrcoin-dark-blue);
}

.button.button-light-blue:hover,
.button.button-light-blue:active {
    background-color: var(--color-white);
}

.button.button-light-blue:disabled {
    background-color: color-mix(in srgb, var(--mrcoin-light-blue) 50%, transparent);
}

.button.button-light-blue.button-text {
    background-color: transparent;
    color: var(--mrcoin-light-blue);
}



.button.button-light-blue-light {
    background-color: transparent;
    border: 1px solid var(--mrcoin-light-blue);
    backdrop-filter: blur(25px);
    color: var(--mrcoin-light-blue);
}

.button.button-light-blue-light:hover,
.button.button-light-blue-light:active {
    background-color: transparent;
    border: 1px solid var(--color-white);
    backdrop-filter: blur(25px);
}

.button.button-light-blue-light:disabled {
    border: 1px solid var(--mrcoin-light-blue);
    opacity: 0.5;
    backdrop-filter: blur(25px);
}

.button.button-light-blue-light.button-text {
    color: var(--mrcoin-light-blue);
}



.button.button-dark-blue {
    background-color: var(--mrcoin-dark-blue);
    color: var(--color-white);
}

.button.button-dark-blue:hover,
.button.button-dark-blue:active {
    background-color: var(--mrcoin-dark-blue-hover);
}

.button.button-dark-blue:disabled {
    background-color: color-mix(in srgb, var(--mrcoin-dark-blue) 50%, transparent);
}

.button.button-dark-blue.button-text {
    background-color: transparent;
    color: var(--mrcoin-dark-blue);
}



.button.button-dark-blue-light {
    background-color: transparent;
    color: var(--mrcoin-dark-blue);
    border: 1px solid var(--mrcoin-dark-blue);
}

.button.button-dark-blue-light:hover,
.button.button-dark-blue-light:active {
    color: var(--mrcoin-dark-blue-hover);
    border: 1px solid var(--mrcoin-dark-blue-hover);
}

.button.button-dark-blue-light:disabled {
    color: var(--mrcoin-dark-blue-hover);
    border: 1px solid var(--mrcoin-dark-blue-hover);
    opacity: 0.5;
}

.button.button-dark-blue-light.button-text {
    background-color: transparent;
    color: var(--mrcoin-dark-blue);
}



.button.button-secondary-dark {
    background-color: var(--color-white);
    color: var(--color-grey-600);
    border: 2px solid var(--color-grey-200);
    backdrop-filter: blur(50px);
}

.button.button-secondary-dark:hover {
    color: var(--color-black);
    border-color: var(--mrcoin-yellow);
}

.button.button-secondary-dark:active {
    background-color: var(--color-grey-100);
    color: var(--color-grey-600);
    border-color: var(--mrcoin-yellow);
}

.button.button-secondary-dark .disabled {
    color: var(--color-grey-500);
    border-color: var(--color-grey-500);
}

.button.button-secondary-dark.button-text {
    background-color: transparent;
    color: var(--color-grey-600);
}



.button.button-language-active {
    display: flex;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background-color: var(--mrcoin-blue-hover);
    color: var(--color-white);
}

.button.button-language-active:hover,
.button.button-language-active:active {
    color: var(--color-white);
    background-color: var(--mrcoin-dark-blue-hover);
}

.button.button-language-active:disabled {
    background-color: var(--mrcoin-blue-hover);
    color: var(--color-white);
    opacity: 0.5;
}

.button.button-language-active.button-text {
    background-color: transparent;
    color: var(--color-white);
}



.button.button-language-inactive {
    display: flex;
    padding: 12px 16px;
    width: 106px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    color: var(--mrcoin-light-blue);
}

.button.button-language-inactive:hover,
.button.button-language-inactive:active {
    color: var(--mrcoin-light-blue);
    background-color: var(--mrcoin-blue-hover);
}

.button.button-language-inactive:disabled {
    background-color: var(--mrcoin-blue-hover);
    color: var(--color-white);
    opacity: 0.5;
}

.button.button-language-inactive.button-text {
    background-color: transparent;
    color: var(--mrcoin-light-blue);
}

.button.button-s {
    padding: 12px 40px 12px 40px;
}

.button.button-s i[class*="icon"] {
    width: 13px;
    height: 12px;
}

.button.button-l {
    padding: 22px 40px 22px 40px;
}

.button.button-l i[class*="icon"] {
    width: 18px;
    height: 16px;
}

.button.button-empty {
    background: none;
    padding: 1px;
    display: flex;
    justify-self: center;
    align-self: center;
    border-radius: 8px;
}

.button.button-icon {
    padding: 0.78rem;
}