/*
    Button
	------ 
    
    .evButton - the default button appearance
    .evButtonProceed - used for process continuation (we will consider this a primary action)
    .evButtonAction - used for actions (we will consider this a primary action)
    .evButtonCancel - used for danger calls (we will consider this a danger action)
    
    For websites we will consider the following button appearances:
    
    1) default - used in most cases.
    2) primary - the strongest call to action on a page or viewable area
    3) subtle
    4) danger - represents an irreversible/destructive action such as deleting
  
  
    # Shared button attributes
*/
.button,
.button-primary,
.button-subtle,
.button-danger,
.evButton,
.evButtonAction,
.evButtonProceed,
.evButtonCancel {
    align-items: center;
    border-radius: var(--button-radius);
    cursor: pointer;
    display: inline-flex;
    gap: .5rem;
    height: var(--button-height);
    justify-content: center;
    padding: var(--button-padding);
    text-decoration: none;
    white-space: nowrap;
    }
.button:hover,
.button:focus,
.button-primary:hover,
.button-primary:focus,
.button-subtle:hover,
.button-subtle:focus,
.button-danger:hover,
.button-danger:focus,
.evButton:hover,
.evButton:focus,
.evButtonAction:hover,
.evButtonAction:focus,
.evButtonProceed:hover,
.evButtonProceed:focus,
.evButtonCancel:hover,
.evButtonCancel:focus {
    text-decoration: none;
    }
.button > .label,
.button-primary > .label,
.button-subtle > .label,
.button-danger > .label,
.evButton > .label,
.evButtonAction > .label,
.evButtonProceed > .label,
.evButtonCancel > .label {
    all: unset;
    }

/*
    # 1. Default buttons
    
    The default form of a button, used for most cases - 
    not impactful enough to represent a primary action.
    
    Includes the following selectors: 
    - .button
    - .evButton
*/
.button,
.evButton {
    background: var(--button-background);
    border: var(--button-border);
    color: var(--button-color);
    }
.button:hover,
.button:focus,
.evButton:hover,
.evButton:focus {
    background: var(--button-background-hover);
    border: var(--button-border-hover);
    color: var(--button-color-hover);
    }
.button:active,
.evButton:active {
    background: var(--button-background-press);
    border: var(--button-border-press);
    color: var(--button-color-press);
    }

/*
    # 2. Primary buttons
    
    Use a primary button to call attention to an action on a form or to 
    highlight the strongest call to action on a page or viewable area.
    
    Includes the following selectors:
    - .button-primary
    - .evButtonProceed
    - .evButtonAction
*/
.button-primary,
.evButtonAction,
.evButtonProceed {
    background: var(--button-primary-background);
    border: var(--button-primary-border);
    color: var(--button-primary-color);
    }
.button-primary:hover,
.button-primary:focus,
.evButtonAction:hover,
.evButtonAction:focus,
.evButtonProceed:hover,
.evButtonProceed:focus {
    background: var(--button-primary-background-hover);
    border: var(--button-primary-border-hover);
    color: var(--button-primary-color-hover);
    }
.button-primary:active,
.evButtonAction:active,
.evButtonProceed:active {
    background: var(--button-primary-background-press);
    border: var(--button-primary-border-press);
    color: var(--button-primary-color-press);
    }

/*
    # 3. Subtle buttons
    
    Includes the following selectors:
    - .button-subtle
*/
.button-subtle {
    background: var(--button-subtle-background);
    border: var(--button-subtle-border);
    color: var(--button-subtle-color);
    }
.button-subtle:hover,
.button-subtle:focus {
    background: var(--button-subtle-background-hover);
    border: var(--button-subtle-border-hover);
    color: var(--button-subtle-color-hover);
    }
.button-subtle:active {
    background: var(--button-subtle-background-press);
    border: var(--button-subtle-border-press);
    color: var(--button-subtle-color-press);
    }

/*
    # 4. Danger buttons
    
    Represents an irreversible/destructive action such as deleting.
    
    Includes the following selectors:
    - .button-danger
    - .evButtonCancel
*/
.button-danger,
.evButtonCancel {
    background: var(--button-danger-background);
    border: var(--button-danger-border);
    color: var(--button-danger-color);
    }
.button-danger:hover,
.button-danger:focus,
.evButtonCancel:hover,
.evButtonCancel:focus {
    background: var(--button-danger-background-hover);
    border: var(--button-danger-border-hover);
    color: var(--button-danger-color-hover);
    }
.button-danger:active,
.evButtonCancel:active {
    background: var(--button-danger-background-press);
    border: var(--button-danger-border-press);
    color: var(--button-danger-color-hover);
    }

/*
    # Button modifiers
    
    1. Round buttons
    2. Sizes
    3. Is Loading
    4. Full Width
*/
.button.shape-round,
.button-primary.shape-round,
.button-subtle.shape-round,
.button-danger.shape-round,
.evButton.shape-round {
    padding: 0 !important;
    aspect-ratio: 1;
    border-radius: 50% !important;
    }
.button.size-large,
.button-primary.size-large,
.button-subtle.size-large,
.button-danger.size-large,
.evButton.size-large {
    height: var(--button-height-large);
    border-radius: var(--button-radius-large);
    padding: var(--button-padding-large);
    }

/* 3 */
.button.is-loading,
.button-primary.is-loading,
.button-subtle.is-loading,
.button-danger.is-loading,
.evButton.is-loading {
    position: relative;
    pointer-events: none;
    }
.button.is-loading *,
.button-primary.is-loading *,
.button-subtle.is-loading *,
.button-danger.is-loading *,
.evButton.is-loading * {
    visibility: hidden;
    }
.button.is-loading:after,
.button-primary.is-loading:after,
.button-subtle.is-loading:after,
.button-danger.is-loading:after,
.evButton.is-loading:after {
    content: '';
    display: block;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    top: 50%;
    left: 50%;
    margin-top: -.75rem;
    margin-left: -.75rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-bottom-color: transparent;
    animation: spin 1s infinite linear;
    }

/* 4 */
.button.full-width,
.button-primary.full-width,
.button-subtle.full-width,
.button-danger.full-width,
.evButton.full-width {
    width: 100%;
    }

/* Disabled buttons */
.button.disabled,
.button:disabled,
.button-primary.disabled,
.button-primary:disabled,
.button-subtle.disabled,
.button-subtle:disabled,
.button-danger.disabled,
.button-danger:disabled,
.evButton.disabled,
.evButton:disabled {
    opacity: .5;
    mix-blend-mode: luminosity;
    pointer-events: none;
    }
.button.disabled > .label,
.button.disabled > .icon,
.button:disabled > .label,
.button:disabled > .icon,
.button-primary.disabled > .label,
.button-primary.disabled > .icon,
.button-primary:disabled > .label,
.button-primary:disabled > .icon,
.button-subtle.disabled > .label,
.button-subtle.disabled > .icon,
.button-subtle:disabled > .label,
.button-subtle:disabled > .icon,
.button-danger.disabled > .label,
.button-danger.disabled > .icon,
.button-danger:disabled > .label,
.button-danger:disabled > .icon,
.evButton.disabled > .label,
.evButton.disabled > .icon,
.evButton:disabled > .label,
.evButton:disabled > .icon {
    color: inherit;
    opacity: .5;
    }

/*
    # Pagination
*/
.evPagination {
    margin: 0;
    display: inline-flex;
    gap: 1rem;
    max-width: 100%;
    overflow: scroll;
    }
.evPagination .evButton {
    padding: 0 !important;
    aspect-ratio: 1;
    border-radius: 50% !important;
    margin: 0;
    }
.evPagination .evButton.active {
    border-bottom: none;
    background-color: var(--button-primary-background);
    color: var(--button-primary-color);
    }
.evPagination .evButton.evPaginationPrevious > .label,
.evPagination .evButton.evPaginationNext > .label {
    display: none;
    }