// ==========================================================================
// PressZone Theme - Button Styles
// ==========================================================================
// Uses Sass variables with body.dark-mode & nesting pattern.
// ==========================================================================

.btn-primary {
    @include button-primary;
}

.btn-gradient {
    @include button-base;
    background: linear-gradient(135deg, $color-primary, $color-secondary);
    color: $dark-bg-primary;
    border: none;

    &:hover:not(:disabled) {
        background: linear-gradient(135deg, $color-primary-hover, $color-secondary-hover);
        transform: translateY(-2px);
        box-shadow: $shadow-md;
    }
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: 1px solid $light-border-color;
    border-radius: 0.5rem;
    color: $light-text-secondary;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all $transition-base;

    &:hover {
        border-color: $color-primary;
        color: $color-primary;
    }

    body.dark-mode & {
        border-color: $dark-border-color;
        color: $dark-text-secondary;

        &:hover {
            border-color: $color-primary;
            color: $color-primary;
        }
    }
}

.btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid $light-border-color;
    border-radius: 0.375rem;
    color: $light-text-muted;
    cursor: pointer;
    transition: all $transition-base;

    &:hover {
        border-color: $color-primary;
        color: $color-primary;
    }

    body.dark-mode & {
        border-color: $dark-border-color;
        color: $dark-text-muted;

        &:hover {
            border-color: $color-primary;
            color: $color-primary;
        }
    }
}