:root {
    /* size="small" */
    --reactist-button-small-font-size: var(--reactist-font-size-caption);
    --reactist-button-small-spacing: var(--reactist-spacing-small);
    --reactist-button-small-height: 28px;

    /* size="normal" (default) */
    --reactist-button-normal-font-size: var(--reactist-font-size-copy);
    --reactist-button-normal-spacing: var(--reactist-spacing-medium);
    --reactist-button-normal-height: 32px;

    /* size="large" */
    --reactist-button-large-font-size: var(--reactist-font-size-body);
    --reactist-button-large-spacing: var(--reactist-spacing-large);
    --reactist-button-large-height: 36px;

    /* variant="primary" */
    --reactist-actionable-primary-idle-tint: #ffffff;
    --reactist-actionable-primary-idle-fill: #008aa6;
    --reactist-actionable-primary-hover-tint: #ffffff;
    --reactist-actionable-primary-hover-fill: #007992;
    --reactist-actionable-primary-disabled-tint: #ffffff;
    --reactist-actionable-primary-disabled-fill: #99d0db;

    /* variant="secondary" */
    --reactist-actionable-secondary-idle-tint: #282f30;
    --reactist-actionable-secondary-idle-fill: #f2f6f7;
    --reactist-actionable-secondary-hover-tint: #282f30;
    --reactist-actionable-secondary-hover-fill: #e3e7e8;
    --reactist-actionable-secondary-disabled-tint: #a9acac;
    --reactist-actionable-secondary-disabled-fill: #f2f6f7;

    /* variant="tertiary" (only has fill when hovered) */
    --reactist-actionable-tertiary-idle-tint: #006f85;
    --reactist-actionable-tertiary-hover-tint: #006f85;
    --reactist-actionable-tertiary-hover-fill: #f2f6f7;
    --reactist-actionable-tertiary-disabled-tint: #99c5ce;

    /* variant="quaternary" (only has fill when hovered) */
    --reactist-actionable-quaternary-idle-tint: #6c777a;
    --reactist-actionable-quaternary-hover-tint: #282f30;
    --reactist-actionable-quaternary-hover-fill: #e0e7e8;
    --reactist-actionable-quaternary-disabled-tint: #c4c9ca;

    /* variant="primary" tone="destructive" */
    --reactist-actionable-primary-destructive-idle-tint: #ffffff;
    --reactist-actionable-primary-destructive-idle-fill: #dc4c3e;
    --reactist-actionable-primary-destructive-hover-tint: #ffffff;
    --reactist-actionable-primary-destructive-hover-fill: #b03d32;
    --reactist-actionable-primary-destructive-disabled-tint: #ffffff;
    --reactist-actionable-primary-destructive-disabled-fill: #f1b7b2;

    /* variant="secondary" tone="destructive" (optionally filled only when hovered) */
    --reactist-actionable-secondary-destructive-idle-tint: #dc4c3e;
    --reactist-actionable-secondary-destructive-hover-tint: #b03d32;
    --reactist-actionable-secondary-destructive-hover-fill: transparent;
    --reactist-actionable-secondary-destructive-disabled-tint: #f1b7b2;
}

/* general styles for all buttons */
.baseButton {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    color: inherit;
    border: none;
    background-color: transparent;
    border-radius: var(--reactist-border-radius-small);
    white-space: nowrap;
    font-family: var(--reactist-font-family);
    font-weight: var(--reactist-font-weight-medium);
    text-decoration: none;
    /* border is always on, but transparent, so that it does not enlarge buttons when we actually color it */
    border: 1px solid transparent;

    /* smooth color transitions */
    transition-duration: 0.3s;
    transition-property: color, background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.label {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
}

/* nice little animation when clicked to give some visual feedback */
.baseButton:active:not([aria-disabled='true']) {
    transform: scale(0.97);
    transition: transform 0.2s cubic-bezier(0.02, 1.505, 0.745, 1.235);
}

.baseButton {
    padding: 0 var(--reactist-btn-spacing);
    font-size: var(--reactist-btn-font-size);
    height: var(--reactist-btn-height);
    line-height: var(--reactist-btn-height);
    /* spinner */
    --reactist-spinner-tint: var(--reactist-btn-idle-tint);
    --reactist-spinner-fill: var(--reactist-btn-idle-fill);
}

.baseButton.shape-rounded {
    border-radius: 1000px;
}

.baseButton.size-small {
    --reactist-btn-height: var(--reactist-button-small-height);
    --reactist-btn-spacing: var(--reactist-button-small-spacing);
    --reactist-btn-font-size: var(--reactist-button-small-font-size);
}

.baseButton.size-normal {
    --reactist-btn-height: var(--reactist-button-normal-height);
    --reactist-btn-spacing: var(--reactist-button-normal-spacing);
    --reactist-btn-font-size: var(--reactist-button-normal-font-size);
}

.baseButton.size-large {
    --reactist-btn-height: var(--reactist-button-large-height);
    --reactist-btn-spacing: var(--reactist-button-large-spacing);
    --reactist-btn-font-size: var(--reactist-button-large-font-size);
}

/* setup the color variables for all the different states */
/* variables are then set per variant and tone so that we do not repeat these definitions below */

.baseButton:not(.disabled) {
    color: var(--reactist-btn-idle-tint);
    background-color: var(--reactist-btn-idle-fill);
}

.baseButton[aria-expanded='true'],
.baseButton:focus-visible:not([aria-disabled='true']),
.baseButton:hover:not([aria-disabled='true']) {
    color: var(--reactist-btn-hover-tint);
    background-color: var(--reactist-btn-hover-fill);
}

.baseButton.disabled {
    cursor: not-allowed;
    color: var(--reactist-btn-disabled-tint);
    background-color: var(--reactist-btn-disabled-fill);
}

/* icons */

.baseButton:not(.iconButton) {
    min-width: 68px;
}

.baseButton.iconButton {
    width: var(--reactist-btn-height);
    height: var(--reactist-btn-height);
    padding: 0;
}

.baseButton .startIcon {
    margin-right: calc(var(--reactist-btn-spacing) - 6px);
    margin-left: -6px;
}

.baseButton .endIcon {
    margin-left: calc(var(--reactist-btn-spacing) - 6px);
    margin-right: -6px;
}

/**
 * Make sure that any element nested inside button elements is non-clickable.
 * This helps when using buttons alongside tracking tools such as Google Analytics.
 */
.baseButton > * {
    pointer-events: none;
}

/* variants with normal tone */

.variant-primary {
    --reactist-btn-idle-tint: var(--reactist-actionable-primary-idle-tint);
    --reactist-btn-idle-fill: var(--reactist-actionable-primary-idle-fill);
    --reactist-btn-hover-tint: var(--reactist-actionable-primary-hover-tint);
    --reactist-btn-hover-fill: var(--reactist-actionable-primary-hover-fill);
    --reactist-btn-disabled-tint: var(--reactist-actionable-primary-disabled-tint);
    --reactist-btn-disabled-fill: var(--reactist-actionable-primary-disabled-fill);
}

.variant-secondary {
    --reactist-btn-idle-tint: var(--reactist-actionable-secondary-idle-tint);
    --reactist-btn-idle-fill: var(--reactist-actionable-secondary-idle-fill);
    --reactist-btn-hover-tint: var(--reactist-actionable-secondary-hover-tint);
    --reactist-btn-hover-fill: var(--reactist-actionable-secondary-hover-fill);
    --reactist-btn-disabled-tint: var(--reactist-actionable-secondary-disabled-tint);
    --reactist-btn-disabled-fill: var(--reactist-actionable-secondary-disabled-fill);
}

.variant-tertiary {
    --reactist-btn-idle-tint: var(--reactist-actionable-tertiary-idle-tint);
    --reactist-btn-idle-fill: transparent;
    --reactist-btn-hover-tint: var(--reactist-actionable-tertiary-hover-tint);
    --reactist-btn-hover-fill: var(--reactist-actionable-tertiary-hover-fill);
    --reactist-btn-disabled-tint: var(--reactist-actionable-tertiary-disabled-tint);
    --reactist-btn-disabled-fill: transparent;
}

.variant-quaternary {
    --reactist-btn-idle-tint: var(--reactist-actionable-quaternary-idle-tint);
    --reactist-btn-idle-fill: transparent;
    --reactist-btn-hover-tint: var(--reactist-actionable-quaternary-hover-tint);
    --reactist-btn-hover-fill: var(--reactist-actionable-quaternary-hover-fill);
    --reactist-btn-disabled-tint: var(--reactist-actionable-quaternary-disabled-tint);
    --reactist-btn-disabled-fill: transparent;
}

/* variants with destructive tone */

.variant-primary.tone-destructive {
    --reactist-btn-idle-tint: var(--reactist-actionable-primary-destructive-idle-tint);
    --reactist-btn-idle-fill: var(--reactist-actionable-primary-destructive-idle-fill);
    --reactist-btn-hover-tint: var(--reactist-actionable-primary-destructive-hover-tint);
    --reactist-btn-hover-fill: var(--reactist-actionable-primary-destructive-hover-fill);
    --reactist-btn-disabled-tint: var(--reactist-actionable-primary-destructive-disabled-tint);
    --reactist-btn-disabled-fill: var(--reactist-actionable-primary-destructive-disabled-fill);
}

.variant-secondary.tone-destructive {
    --reactist-btn-idle-tint: var(--reactist-actionable-secondary-destructive-idle-tint);
    --reactist-btn-idle-fill: transparent;
    --reactist-btn-hover-tint: var(--reactist-actionable-secondary-destructive-hover-tint);
    --reactist-btn-hover-fill: var(--reactist-actionable-secondary-destructive-hover-fill);
    --reactist-btn-disabled-tint: var(--reactist-actionable-secondary-destructive-disabled-tint);
    --reactist-btn-disabled-fill: transparent;
}

/* the secondary destructive variant has border around it */
.variant-secondary.tone-destructive {
    border-color: var(--reactist-btn-idle-tint);
}
.variant-secondary.tone-destructive:hover {
    border-color: var(--reactist-btn-hover-tint);
}
.variant-secondary.tone-destructive.disabled {
    border-color: var(--reactist-btn-disabled-tint);
}

.variant-tertiary.tone-destructive,
.variant-quaternary.tone-destructive {
    --reactist-btn-idle-tint: var(--reactist-actionable-secondary-destructive-idle-tint);
    --reactist-btn-hover-tint: var(--reactist-actionable-secondary-destructive-hover-tint);
    --reactist-btn-disabled-tint: var(--reactist-actionable-secondary-destructive-disabled-tint);
}
