/* stylelint-disable */

$lg-backdrop-color: #fff; // Gallery backdrop color
$backdrop-opacity: 1; // Gallery backdrop opacity
$lg-toolbar-bg: rgba(255, 255, 255, .8); // Toolbar background color
$lg-border-radius-base: 2px; // Base border radius for the gallery elements
$lg-theme-highlight: rgb(169, 7, 7); // Gallery highlight areas like progressbar active bg, thumbnails border..
$lg-theme: #fff; // Gallery theme ?

// basic icon colours
$lg-icon-bg: rgba(255, 255, 255, .8); // Gallery icons background color
$lg-icon-color: #333; // Gallery icons color
$lg-icon-hover-color: #000; // Gallery icons hover color

// counter
$lg-counter-color: #e6e6e6; // Gallery counter color
$lg-counter-font-size: 16px; // Gallery counter font size

// Next prev icons
$lg-next-prev-bg: $lg-icon-bg; // Next prev controls background color
$lg-next-prev-border: 1px solid theme('colors.gray.100'); // Next prev controls border
$lg-next-prev-color: $lg-icon-color; // Next prev controls icon color
$lg-next-prev-hover-color: $lg-icon-hover-color; // Next prev controls icon color on hover
$lg-next-prev-desktop-side-offset: theme('margin.2');

$lg-action-button-size: 56px;
$lg-action-icon-font-size: theme('textSizes.2xl');

// toolbar icons
$lg-toolbar-icon-color: $lg-icon-color; // Gallery backdrop opacity
$lg-toolbar-icon-hover-color: $lg-icon-hover-color; // Gallery backdrop opacity

// autoplay progress bar
$lg-progress-bar-bg: #333; // Progress bar background color
$lg-progress-bar-active-bg: $lg-theme-highlight; // Progress bar highlight color
$lg-progress-bar-height: 5px; // Height of the progress bar

// Zoom plugin
$zoom-transition-duration: 0.3s; // Image zoom animation duration

// Caption (.lg-sub-html)
$lg-caption-bg: rgba(255, 255, 255, .8); // Sub html container background color
$lg-caption-color: #555; // Sub html container color
$lg-caption-font-size: 14px;

// thumbnail toggle button
$lg-thumb-toggle-bg: #0D0A0A; // Thumbnail icon toggle icon background color
$lg-thumb-toggle-color: $lg-icon-color; // // Thumbnail icon toggle icon color
$lg-thumb-toggle-hover-color: $lg-icon-hover-color; // Thumbnail icon toggle icon color on hover
$lg-thumb-bg: #0D0A0A; // Thumbnail container background color

// z-index
$zindex-outer: 1050; // Gallery outer div z-index
$zindex-progressbar: 1083; // Gallery autoplay progress bar z-index
$zindex-controls: 1080; // Gallery controls z-index
$zindex-toolbar: 1080; // Gallery toolbar z-index
$zindex-subhtml: 1080; // Gallery sub html container z-index
$zindex-thumbnail: 1080; // Gallery thumbnail container z-index
$zindex-pager: 1080; // Gallery pager z-index
$zindex-playbutton: 1080; // Video play button z-index
$zindex-item: 1060; // Gallery slide item z-index
$zindex-backdrop: 1040; // Gallery backdrop z-index

.lg-sub-html p span {
    font-size: 12px;
}
