:root {
    --Q-button-font-color: var(--Q-app-font-color-1);
    --Q-button-font-weight: bold;
    --Q-button-font-family: var(--Q-app-font-family);
    --Q-button-border-radius: 5rem;
    --Q-button-padding: 0.4rem 0.6rem;
    --Q-button-font-size: 1.1rem;
    --Q-button-icon-size: 1.1rem;
    --Q-button-box-shadow: 0.1rem 0.1rem 0.2rem 0.05rem var(--Q-app-box-shadow-color);
    --Q-button-border: none;
    --Q-button-background: linear-gradient(-180deg, #08a1e7 0%, #017aca 100%);
    --Q-button-box-shadow-inset: 0 0.25rem 0.5rem 0 #20a6ff inset;
    --Q-button-hover-brightness: 110%;
    --Q-button-active-brightness: 85%;
    --Q-button-transition: filter 100ms;

    --Q-button-focus-outline: var(--Q-app-focus-outline);
    --Q-button-focus-outline-offset: var(--Q-app-focus-outline-offset);

    --Q-button-icon-margin: var(--Q-app-spacing-2);
    --Q-button-icon-only-size: 1.2rem;
    --Q-button-icon-only-border-radius: 50%;
    --Q-button-icon-only-padding: var(--Q-app-spacing-2);

    --Q-button-small-padding: 0.2rem 0.4rem;
    --Q-button-small-font-size: 0.9rem;
    --Q-button-small-icon-size: 0.9rem;
    --Q-button-small-icon-only-padding: var(--Q-app-spacing-1);
    --Q-button-small-icon-only-size: 1rem;

    --Q-button-large-padding: 0.4rem 0.6rem;
    --Q-button-large-font-size: 1.3rem;
    --Q-button-large-icon-size: 1.3rem;
    --Q-button-large-icon-only-padding: var(--Q-app-spacing-2);
    --Q-button-large-icon-only-size: 1.75rem;

    --Q-button-disabled-color: var(--Q-button-font-color);
    --Q-button-disabled-border: none;
    --Q-button-disabled-background: linear-gradient(180deg, #7a7a7a 0%, #636363 100%);
    --Q-button-disabled-box-shadow-inset: 0 0.25rem 0.5rem 0 #c0c0c0 inset;

    --Q-button-red-font-color: var(--Q-button-font-color);
    --Q-button-red-border: none;
    --Q-button-red-background: linear-gradient(180deg, #e01102 0%, #b41500 100%);
    --Q-button-red-box-shadow-inset: 0 0.25rem 0.5rem 0 #ff2727 inset;

    --Q-button-orange-font-color: var(--Q-button-font-color);
    --Q-button-orange-border: none;
    --Q-button-orange-background: linear-gradient(180deg, #a06d00 0%, #be7c00 100%);
    --Q-button-orange-box-shadow-inset: 0 0.25rem 0.5rem 0 #ffa734 inset;

    --Q-button-green-font-color: var(--Q-button-font-color);
    --Q-button-green-border: none;
    --Q-button-green-background: linear-gradient(180deg, #00b93e 0%, #009431 100%);
    --Q-button-green-box-shadow-inset: 0 0.25rem 0.5rem 0 #2aeb7b inset;

    --Q-button-flat-color: var(--Q-button-font-color);
    --Q-button-flat-disabled-color: #636363;

    --Q-button-group-button-side-margin: var(--Q-app-spacing-1);
    --Q-button-group-padding: var(--Q-app-spacing-1)
}


/* Button */

.Q-button {
    cursor: pointer;
    user-select: none;
    appearance: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: max-content;
    padding: var(--Q-button-padding);
    border: var(--Q-button-border);
    border-radius: var(--Q-button-border-radius);
    color: var(--Q-button-font-color);
    background: var(--Q-button-background);
    box-shadow: var(--Q-button-box-shadow), var(--Q-button-box-shadow-inset);
    transition: var(--Q-button-transition);
}

.Q-button p {
    font-size: var(--Q-button-font-size);
    font-family: var(--Q-button-font-family);
    font-weight: var(--Q-button-font-weight);
}

.Q-button[hidden] {
    display: none;
}

.Q-button:hover {
    filter: brightness(var(--Q-button-hover-brightness));
}

.Q-button:active {
    filter: brightness(var(--Q-button-active-brightness));
    box-shadow: var(--Q-button-box-shadow-inset);
}

.Q-button:focus-visible {
    outline: var(--Q-button-focus-outline);
    outline-offset: var(--Q-button-focus-outline-offset);
}

.Q-button svg, .Q-button img {
    height: var(--Q-button-icon-size);
    width: var(--Q-button-icon-size);
    margin-right: var(--Q-button-icon-margin);
}

.Q-button.Q-button-reverse {
    flex-direction: row-reverse;
}

.Q-button.Q-button-reverse svg, .Q-button.Q-button-reverse img {
    margin-left: var(--Q-button-icon-margin);
    margin-right: 0;
}

.Q-button-icon {
    padding: var(--Q-button-icon-only-padding);
    border-radius: var(--Q-button-icon-only-border-radius);
}

.Q-button.Q-button-icon svg, .Q-button.Q-button-icon img {
    height: var(--Q-button-icon-only-size);
    width: var(--Q-button-icon-only-size);
    margin: 0;
}

.Q-button-icon p {
    display: none;
}

/* Button large */

.Q-button-large {
    padding: var(--Q-button-large-padding);
}

.Q-button-large p {
    font-size: var(--Q-button-large-font-size);
}

.Q-button-large svg, .Q-button-large img {
    height: var(--Q-button-large-icon-size);
    width: var(--Q-button-large-icon-size);
}

.Q-button-large.Q-button-icon {
    padding: var(--Q-button-large-icon-only-padding);
}

.Q-button-large.Q-button-icon svg, .Q-button-large.Q-button-icon img {
    height: var(--Q-button-large-icon-only-size);
    width: var(--Q-button-large-icon-only-size);
}


/* Button small */

.Q-button-small {
    padding: var(--Q-button-small-padding);
}

.Q-button-small p {
    font-size: var(--Q-button-small-font-size);
}

.Q-button-small svg, .Q-button-small img {
    height: var(--Q-button-small-icon-size);
    width: var(--Q-button-small-icon-size);
}

.Q-button-small.Q-button-icon {
    padding: var(--Q-button-small-icon-only-padding);
}

.Q-button-small.Q-button-icon svg, .Q-button-small.Q-button-icon img {
    height: var(--Q-button-small-icon-only-size);
    width: var(--Q-button-small-icon-only-size);
}

/* Button Green */

.Q-button-green {
    color: var(--Q-button-green-font-color);
    border: var(--Q-button-green-border);
    background: var(--Q-button-green-background);
	box-shadow: var(--Q-button-box-shadow), var(--Q-button-green-box-shadow-inset);
}

.Q-button-green:active {
    box-shadow: var(--Q-button-green-box-shadow-inset);
}

/* Button Orange */

.Q-button-orange {
    color: var(--Q-button-orange-font-color);
    border: var(--Q-button-orange-border);
    background: var(--Q-button-orange-background);
	box-shadow: var(--Q-button-box-shadow), var(--Q-button-orange-box-shadow-inset);
}

.Q-button-orange:active {
    box-shadow: var(--Q-button-orange-box-shadow-inset);
}

/* Button Red */

.Q-button-red {
    color: var(--Q-button-red-font-color);
    border: var(--Q-button-red-border);
    background: var(--Q-button-red-background);
	box-shadow: var(--Q-button-box-shadow), var(--Q-button-red-box-shadow-inset);
}

.Q-button-red:active {
    box-shadow: var(--Q-button-red-box-shadow-inset);
}

/* Button disabled */

.Q-button:disabled, .Q-button:disabled:active {
    cursor: unset;
    pointer-events: none;
    color: var(--Q-button-disabled-color);
    border: var(--Q-button-disabled-border);
    background: var(--Q-button-disabled-background);
	box-shadow: var(--Q-button-disabled-box-shadow-inset);
    transform: none;
}

.Q-button:disabled:hover, .Q-button:disabled:active {
    filter: brightness(100%);
}

/* Button flat */

.Q-button-flat {
    color: var(--Q-button-flat-color);
}

.Q-button-flat, .Q-button-flat:active, .Q-button-flat:disabled, .Q-button-flat:disabled:active {
    background: none;
    box-shadow: none;
}

.Q-button-flat:disabled, .Q-button-flat:disabled:active {
    color: var(--Q-button-flat-disabled-color);
}

/* Group */

.Q-button-group-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.Q-button-group {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: var(--Q-button-group-padding);
}

.Q-button-group::-webkit-scrollbar {
    display: none;
}

.Q-button-group .Q-button p {
    white-space: nowrap;
}

.Q-button-group .Q-button:first-child:last-child {
    border-radius: var(--Q-button-border-radius);
}

.Q-button-group .Q-button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: var(--Q-button-group-button-side-margin);
}

.Q-button-group .Q-button:not(:first-child):not(:last-child) {
    border-radius: 0;
    margin-right: var(--Q-button-group-button-side-margin);
}

.Q-button-group .Q-button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* MOBILE */

@media only screen and (max-width: 600px) {

    .Q-button-icon-mobile p {
        display: none;
    }

    .Q-button.Q-button-icon-mobile {
        padding: var(--Q-button-icon-padding);
    }

    .Q-button.Q-button-small.Q-button-icon-mobile {
        padding: var(--Q-button-small-icon-only-padding);
    }

    .Q-button.Q-button-large.Q-button-icon-mobile {
        padding: var(--Q-button-large-icon-only-padding);
    }
}