/* 
 * SAVE Button Styles - Custom Button Styles for the Application
 * Created: 2023
 */

/* Save Button Styles */
.save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--save-primary-blue-darker);
    color: var(--save-white);
    font-family: var(--save-font-mono);
    font-weight: var(--save-font-weight-medium);
    font-size: var(--save-font-size-base);
    line-height: var(--save-line-height);
    padding: var(--save-spacing-md) var(--save-spacing-lg);
    border-radius: var(--save-border-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--save-transition), color var(--save-transition), border-color var(--save-transition);
    text-decoration: none;
    text-transform: uppercase;
    min-height: 48px;
    min-width: 120px;
    gap: var(--save-spacing-sm);
    position: relative;
}

.save-button:hover {
    background-color: var(--save-white);
    color: var(--save-primary-blue-darker);
    border-color: var(--save-primary-blue-darker);
}

.save-button:active {
    background-color: var(--save-white);
    color: var(--save-primary-blue-darker);
}

.save-button:disabled, 
.save-button.disabled {
    background-color: var(--save-gray-10);
    color: var(--save-gray-50);
    cursor: not-allowed;
    transform: none;
}

/* Button with icon on the left */
.save-button-icon-left {
    padding-left: var(--save-spacing-lg);
}

.save-button-icon-left [class^="icon-"], 
.save-button-icon-left [class*=" icon-"] {
    margin-right: var(--save-spacing-sm);
    font-size: 16px;
}

/* Button with icon on the right */
.save-button-icon-right {
    padding-right: var(--save-spacing-lg);
}

.save-button-icon-right [class^="icon-"], 
.save-button-icon-right [class*=" icon-"] {
    margin-left: var(--save-spacing-sm);
    font-size: 16px;
}

/* Icon color handling */
.save-button [class^="icon-"], 
.save-button [class*=" icon-"] {
    color: var(--save-white);
    transition: color var(--save-transition);
}

/* Change icon color on hover */
.save-button:hover [class^="icon-"],
.save-button:hover [class*=" icon-"] {
    color: var(--save-primary-blue-darker);
}

/* For secondary buttons with black text, black icons */
.save-button-secondary [class^="icon-"],
.save-button-secondary [class*=" icon-"] {
    color: var(--save-primary-blue-darker);
}

/* Secondary button variant */
.save-button-secondary {
    background-color: var(--save-white);
    color: var(--save-primary-blue-darker);
    border: 1px solid var(--save-primary-blue-darker);
}

.save-button-secondary:hover {
    background-color: var(--save-primary-blue-darker);
    color: var(--save-white);
    border-color: var(--save-primary-blue-darker);
}

/* Change icon color when secondary button is hovered */
.save-button-secondary:hover [class^="icon-"],
.save-button-secondary:hover [class*=" icon-"] {
    color: var(--save-white);
}

/* For disabled buttons, gray icons */
.save-button:disabled [class^="icon-"],
.save-button:disabled [class*=" icon-"],
.save-button.disabled [class^="icon-"],
.save-button.disabled [class*=" icon-"] {
    color: var(--save-gray-50);
}

/* For secondary disabled buttons, lighter gray icons */
.save-button-secondary:disabled [class^="icon-"],
.save-button-secondary:disabled [class*=" icon-"],
.save-button-secondary.disabled [class^="icon-"],
.save-button-secondary.disabled [class*=" icon-"] {
    color: var(--save-gray-25);
}

/* Large button variant */
.save-button-large {
    padding: var(--save-spacing-md) var(--save-spacing-xl);
    font-size: var(--save-font-size-md);
    min-height: 56px;
}

.save-button-large [class^="icon-"],
.save-button-large [class*=" icon-"] {
    font-size: 18px;
}

/* Small button variant */
.save-button-small {
    padding: var(--save-spacing-sm) var(--save-spacing-md);
    font-size: var(--save-font-size-sm);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--save-primary-blue-darker);
    color: var(--save-white);
    font-family: var(--save-font-mono);
    font-weight: var(--save-font-weight-medium);;
    line-height: var(--save-line-height);
    border-radius: var(--save-border-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--save-transition), color var(--save-transition), border-color var(--save-transition);
    text-decoration: none;
    text-transform: uppercase;
    min-width: 120px;
    gap: var(--save-spacing-sm);
    position: relative;    
}

.save-button-small [class^="icon-"],
.save-button-small [class*=" icon-"] {
    font-size: 14px;
}

/* Full width button */
.save-button-full {
    width: 100%;
}

.save-button-secondary:disabled,
.save-button-secondary.disabled {
    background-color: var(--save-white);
    color: var(--save-gray-25);
    border-color: var(--save-gray-25);
    cursor: not-allowed;
}

/* Remove legacy icon styles that use background images */
.save-button-chevron-east::after,
.save-button-icon-left.save-button-chevron-east::before,
.save-button-chevron-west::after,
.save-button-icon-left.save-button-chevron-west::before,
.save-button-chevron-nord::after,
.save-button-icon-left.save-button-chevron-nord::before,
.save-button-chevron-sud::after,
.save-button-icon-left.save-button-chevron-sud::before,
.save-button-plus::after,
.save-button-icon-left.save-button-plus::before,
.save-button-download::after,
.save-button-icon-left.save-button-download::before {
    background-image: none;
    content: none;
}