﻿/* Icon Button Styles */

/* Icon-only button styling - maintain standard button dimensions */
.btn-icon-only {
    min-width: 38px;
    padding: 0.375rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-icon-only.btn-sm {
        min-width: 31px;
        padding: 0.25rem 0.5rem;
    }

    .btn-icon-only.btn-lg {
        min-width: 48px;
        padding: 0.5rem 1rem;
    }

    /* Larger icons when text is hidden */
    .btn-icon-only i {
        font-size: 1.25rem;
    }

    .btn-icon-only.btn-sm i {
        font-size: 1.1rem;
    }

    .btn-icon-only.btn-lg i {
        font-size: 1.5rem;
    }

/* Ensure icons are vertically centered */
.btn i {
    display: inline-flex;
    align-items: center;
}

/* Responsive text hiding - hide text below specified breakpoint */

/* Hide text on xs (all mobile) */
@media (max-width: 575.98px) {
    .btn-responsive-text-xs .btn-text-xs {
        display: none;
    }

    .btn-responsive-text-xs {
        min-width: 38px;
    }

        .btn-responsive-text-xs.btn-sm {
            min-width: 31px;
        }

        .btn-responsive-text-xs.btn-lg {
            min-width: 48px;
        }
        /* Larger icon when text is hidden */
        .btn-responsive-text-xs i {
            font-size: 1.25rem;
        }

        .btn-responsive-text-xs.btn-sm i {
            font-size: 1.1rem;
        }

        .btn-responsive-text-xs.btn-lg i {
            font-size: 1.5rem;
        }
}

/* Hide text on sm and below */
@media (max-width: 767.98px) {
    .btn-responsive-text-sm .btn-text-sm {
        display: none;
    }

    .btn-responsive-text-sm {
        min-width: 38px;
    }

        .btn-responsive-text-sm.btn-sm {
            min-width: 31px;
        }

        .btn-responsive-text-sm.btn-lg {
            min-width: 48px;
        }
        /* Larger icon when text is hidden */
        .btn-responsive-text-sm i {
            font-size: 1.25rem;
        }

        .btn-responsive-text-sm.btn-sm i {
            font-size: 1.1rem;
        }

        .btn-responsive-text-sm.btn-lg i {
            font-size: 1.5rem;
        }
}

/* Hide text on md and below */
@media (max-width: 991.98px) {
    .btn-responsive-text-md .btn-text-md {
        display: none;
    }

    .btn-responsive-text-md {
        min-width: 38px;
    }

        .btn-responsive-text-md.btn-sm {
            min-width: 31px;
        }

        .btn-responsive-text-md.btn-lg {
            min-width: 48px;
        }
        /* Larger icon when text is hidden */
        .btn-responsive-text-md i {
            font-size: 1.25rem;
        }

        .btn-responsive-text-md.btn-sm i {
            font-size: 1.1rem;
        }

        .btn-responsive-text-md.btn-lg i {
            font-size: 1.5rem;
        }
}

/* Hide text on lg and below */
@media (max-width: 1199.98px) {
    .btn-responsive-text-lg .btn-text-lg {
        display: none;
    }

    .btn-responsive-text-lg {
        min-width: 38px;
    }

        .btn-responsive-text-lg.btn-sm {
            min-width: 31px;
        }

        .btn-responsive-text-lg.btn-lg {
            min-width: 48px;
        }
        /* Larger icon when text is hidden */
        .btn-responsive-text-lg i {
            font-size: 1.25rem;
        }

        .btn-responsive-text-lg.btn-sm i {
            font-size: 1.1rem;
        }

        .btn-responsive-text-lg.btn-lg i {
            font-size: 1.5rem;
        }
}

/* Hide text on xl and below */
@media (max-width: 1399.98px) {
    .btn-responsive-text-xl .btn-text-xl {
        display: none;
    }

    .btn-responsive-text-xl {
        min-width: 38px;
    }

        .btn-responsive-text-xl.btn-sm {
            min-width: 31px;
        }

        .btn-responsive-text-xl.btn-lg {
            min-width: 48px;
        }
        /* Larger icon when text is hidden */
        .btn-responsive-text-xl i {
            font-size: 1.25rem;
        }

        .btn-responsive-text-xl.btn-sm i {
            font-size: 1.1rem;
        }

        .btn-responsive-text-xl.btn-lg i {
            font-size: 1.5rem;
        }
}

/* Optional: Square icon buttons (equal width and height) */
.btn-icon-only.btn-square,
.btn-responsive-text-xs.btn-square,
.btn-responsive-text-sm.btn-square,
.btn-responsive-text-md.btn-square,
.btn-responsive-text-lg.btn-square,
.btn-responsive-text-xl.btn-square {
    width: 38px;
    height: 38px;
    padding: 0;
}

    .btn-icon-only.btn-square.btn-sm,
    .btn-responsive-text-xs.btn-square.btn-sm,
    .btn-responsive-text-sm.btn-square.btn-sm,
    .btn-responsive-text-md.btn-square.btn-sm,
    .btn-responsive-text-lg.btn-square.btn-sm,
    .btn-responsive-text-xl.btn-square.btn-sm {
        width: 31px;
        height: 31px;
    }

    .btn-icon-only.btn-square.btn-lg,
    .btn-responsive-text-xs.btn-square.btn-lg,
    .btn-responsive-text-sm.btn-square.btn-lg,
    .btn-responsive-text-md.btn-square.btn-lg,
    .btn-responsive-text-lg.btn-square.btn-lg,
    .btn-responsive-text-xl.btn-square.btn-lg {
        width: 48px;
        height: 48px;
    }

/* Mobile full-width responsive helper */
@media (max-width: 575.98px) {
    .w-100.w-sm-auto {
        width: 100% !important;
    }
}

@media (min-width: 576px) {
    .w-100.w-sm-auto {
        width: auto !important;
    }
}
