/**
 * Custom Arrow Icons for Client Logo Slider
 * Designed to match Font Awesome arrow styles
 * 
 * @package     Joomla.Site
 * @subpackage  mod_logo_slider
 * @author      Infyways Solutions
 * @copyright   Copyright (C) 2020-2025 Infyways Solutions. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @link        https://joomlax.com
 */

/* Base arrow container - dynamic sizing via CSS variables */
.ibx-arrow-fa {
    display: inline-block;
    width: var(--arrow-size, 24px);
    height: var(--arrow-size, 24px);
    position: relative;
    vertical-align: middle;
}

/* Arrow size variants */
.ibx-arrow-small {
    --arrow-size: 16px;
}

.ibx-arrow-medium {
    --arrow-size: 24px;
}

.ibx-arrow-large {
    --arrow-size: 32px;
}

.ibx-arrow-custom {
    --arrow-size: var(--custom-arrow-size, 24px);
}

/* Font Awesome style chevron arrows - dynamic sizing */
.ibx-arrow-left-fa:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--arrow-size, 24px) * 0.33);
    height: calc(var(--arrow-size, 24px) * 0.33);
    border-left: calc(var(--arrow-size, 24px) * 0.08) solid var(--arrow-color, currentColor);
    border-bottom: calc(var(--arrow-size, 24px) * 0.08) solid var(--arrow-color, currentColor);
    transform: translate(-50%, -50%) rotate(45deg);
}

.ibx-arrow-right-fa:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--arrow-size, 24px) * 0.33);
    height: calc(var(--arrow-size, 24px) * 0.33);
    border-right: calc(var(--arrow-size, 24px) * 0.08) solid var(--arrow-color, currentColor);
    border-top: calc(var(--arrow-size, 24px) * 0.08) solid var(--arrow-color, currentColor);
    transform: translate(-50%, -50%) rotate(45deg);
}

.ibx-arrow-up-fa:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--arrow-size, 24px) * 0.33);
    height: calc(var(--arrow-size, 24px) * 0.33);
    border-left: calc(var(--arrow-size, 24px) * 0.08) solid var(--arrow-color, currentColor);
    border-top: calc(var(--arrow-size, 24px) * 0.08) solid var(--arrow-color, currentColor);
    transform: translate(-50%, -50%) rotate(45deg);
}

.ibx-arrow-down-fa:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--arrow-size, 24px) * 0.33);
    height: calc(var(--arrow-size, 24px) * 0.33);
    border-right: calc(var(--arrow-size, 24px) * 0.08) solid var(--arrow-color, currentColor);
    border-bottom: calc(var(--arrow-size, 24px) * 0.08) solid var(--arrow-color, currentColor);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Alternative: Simple triangle arrows */
.ibx-arrow-simple {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
}

.ibx-arrow-left-simple {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid currentColor;
}

.ibx-arrow-right-simple {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid currentColor;
}

.ibx-arrow-up-simple {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid currentColor;
}

.ibx-arrow-down-simple {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid currentColor;
}

/* Hover effects for navigation controls */
.ibx-controls-direction a {
    transition: color 0.3s ease;
}

.ibx-controls-direction a:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ibx-arrow:before {
        font-size: 1.5em;
    }
    
    .ibx-arrow-fa {
        width: 16px;
        height: 16px;
    }
    
    .ibx-arrow-fa:before,
    .ibx-arrow-fa:after {
        height: 10px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ibx-arrow:before {
        font-weight: 900;
    }
    
    .ibx-arrow-fa:before,
    .ibx-arrow-fa:after {
        width: 3px;
        border-radius: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ibx-controls-direction a:hover {
        transform: none;
        transition: none;
    }
}