/*

Buttons
.buttonPrimary
.buttonSecondary
.buttonText
.buttonSmall
.buttonSmallText

*/

.buttonPrimary,
.buttonSecondary {
    background-color: var(--colorButtonPrimaryBg) !important;
    transition: var(--buttonTransition) !important;
    cursor: pointer !important;
    color: var(--colorButtonPrimaryText) !important;
    user-select: none !important;
    border-radius: var(--borderRadius) !important;
    box-shadow: var(--buttonPrimaryNormalShadow);
    width: 50px !important;
    height: 50px !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}
.buttonSquare {
    border-radius: 3px !important;
}
.buttonSecondary {
    width: 30px !important;
    height: 30px !important;
}
.buttonSecondary {
    background-color: #00000080 !important;
    color: var(--colorButtonSecondaryNormalText) !important;
    box-shadow: var(--buttonSecondaryNormalShadow);
}
.buttonText {
    padding: 0.75rem 1.25rem;
    height: auto !important;
    width: auto !important;
    overflow: hidden !important;
}
.buttonText > div {
    pointer-events: none !important;
    background: none !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-family: var(--fontButton);
    text-transform: uppercase !important;
    color: inherit !important;
}

body.hasHover .buttonPrimary:hover,
body.hasHover .buttonPrimary:focus-visible {
    background-color: var(--colorButtonPrimaryHoverBg) !important;
    box-shadow: var(--buttonPrimaryHoverShadow);
    color: var(--colorButtonPrimaryHoverText) !important;
}

body.hasHover .buttonSecondary:hover,
body.hasHover .buttonSecondary:focus-visible {
    background-color: var(--colorButtonSecondaryHoverBg) !important;
    box-shadow: var(--buttonSecondaryHoverShadow);
    color: var(--colorButtonSecondaryHoverText) !important;
}

.buttonPrimary > .ggskin_svg,
.buttonSecondary > .ggskin_svg {
    transition-timing-function: cubic-bezier(0.82, 0.19, 0.16, 0.8) !important;
}
body.hasHover .buttonPrimary:hover > .ggskin_svg img,
body.hasHover .buttonPrimary:focus-visible > .ggskin_svg img {
    filter: var(--filterButtonPrimaryHover);
}
body.hasHover .buttonSecondary:hover > .ggskin_svg img,
body.hasHover .buttonSecondary:focus-visible > .ggskin_svg img {
    filter: var(--filterButtonSecondaryHover);
}
.buttonSmall,
.buttonSmallText {
    height: 30px !important;
    width: 30px !important;
}
.buttonSmallText {
    padding: 0 !important;
    height: 30px !important;
    width: auto !important;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 0 1rem !important;
}
.buttonSmallText,
.buttonSmallText > div,
.buttonSmall,
.buttonSmall > * {
    font-size: 0.9rem !important;
    font-weight: 300 !important;
    text-transform: none !important;
}
.buttonSmall {
    box-shadow: none !important;
}
.buttonPrimary.disabled,
.buttonSecondary.disabled {
    opacity: 0.7 !important;
    background-color: var(--colorButtonPrimaryBg) !important;
    pointer-events: none !important;
    cursor: default !important;
}
.buttonPrimary.disabled > div,
.buttonSecondary.disabled > div {
    pointer-events: none !important;
    filter: grayscale(100%);
}