//
// Component: Slidenav
//
// ========================================================================


// Variables
// ========================================================================

@slidenav-padding-vertical:                     5px;
@slidenav-padding-horizontal:                   10px;

@slidenav-color:                                fade(@global-color, 50%);
@slidenav-hover-color:                          fade(@global-color, 90%);
@slidenav-active-color:                         fade(@global-color, 50%);

@slidenav-large-padding-vertical:               10px;
@slidenav-large-padding-horizontal:             @slidenav-large-padding-vertical;


// Component
// ========================================================================

.hook-slidenav() { transition: color 0.1s ease-in-out; }

.hook-slidenav-hover() {}

.hook-slidenav-active() {}


// Icon modifier
// ========================================================================

.hook-slidenav-previous() {}

.hook-slidenav-next() {}


// Size modifier
// ========================================================================

.hook-slidenav-large() {}


// Container
// ========================================================================

.hook-slidenav-container() {}


// Miscellaneous
// ========================================================================

.hook-icon-misc() {}


// Inverse
// ========================================================================

@inverse-slidenav-color:                       fade(@inverse-global-color, 100%);
@inverse-slidenav-hover-color:                 fade(@inverse-global-color, 105%);
@inverse-slidenav-active-color:                fade(@inverse-global-color, 100%);

.hook-inverse-slidenav() {}
.hook-inverse-slidenav-hover() {}
.hook-inverse-slidenav-active() {}