/* Icon Button Styles */
.btn-icon {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    background-color: var(--sys-color-secondary-default);
    color: var(--sys-color-secondary-text);
    border-color: var(--sys-color-secondary-default);
    aspect-ratio: 1;
    min-width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background-color: var(--sys-color-secondary-hover);
    border-color: var(--sys-color-secondary-hover);
    color: var(--sys-color-secondary-text);
}

.btn-icon:active {
    background-color: var(--sys-color-secondary-active);
    border-color: var(--sys-color-secondary-active);
    color: var(--sys-color-secondary-text);
}

/* Icon button variants */
.btn-icon-primary {
    background-color: var(--sys-color-primary-default);
    color: var(--sys-color-primary-text);
    border-color: var(--sys-color-primary-default);
}

.btn-icon-primary:hover {
    background-color: var(--sys-color-primary-hover);
    border-color: var(--sys-color-primary-hover);
}

.btn-icon-ghost {
    background-color: transparent;
    color: var(--sys-color-text-secondary);
    border-color: transparent;
}

.btn-icon-ghost:hover {
    background-color: var(--sys-color-secondary-default);
    color: var(--sys-color-text-primary);
}

/* Icon button sizes */
.btn-icon-sm {
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
}

.btn-icon-lg {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-lg);
}

/* Circular icon buttons */
.btn-icon-circle {
    border-radius: var(--border-radius-full);
}

/* Icon button with tooltip positioning */
.btn-icon[title] {
    position: relative;
}

/* Focus states for icon buttons */
.btn-icon:focus-visible {
    outline: 2px solid var(--sys-color-primary-default);
    outline-offset: 2px;
}

.btn-icon-primary:focus-visible {
    outline-color: var(--sys-color-primary-default);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}