//
// Component: Tab
//
// ========================================================================


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

//
// New
//

@tab-vertical-item-padding-horizontal:          @tab-item-padding-horizontal;
@tab-vertical-item-padding-vertical:            @tab-item-padding-vertical;


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

.hook-tab() {}


// Items
// ========================================================================

.hook-tab-item() {
    transition: 0.1s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
}

.hook-tab-item() when not (@base-link-text-decoration = none) {
    text-decoration: none;
}

.hook-tab-item-hover() {}

.hook-tab-item-active() {}

.hook-tab-item-disabled() {}


// Position modifiers
// ========================================================================

.hook-tab-bottom() {}

.hook-tab-bottom-item() {}

.hook-tab-left() {}

.hook-tab-left-item() { padding: @tab-vertical-item-padding-vertical @tab-vertical-item-padding-horizontal; }

.hook-tab-right() {}

.hook-tab-right-item() { padding: @tab-vertical-item-padding-vertical @tab-vertical-item-padding-horizontal; }


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

.hook-tab-misc() {

    .uk-tab .uk-dropdown { margin-left: (@tab-margin-horizontal + @tab-item-padding-horizontal) }

}


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

.hook-inverse-tab() {}
.hook-inverse-tab-item() {}
.hook-inverse-tab-item-hover() {}
.hook-inverse-tab-item-active() {}
.hook-inverse-tab-item-disabled() {}