@import "../colors"; @import "../globals"; @import "../mixins"; @import "./config"; .tabs { position: relative; display: flex; flex-direction: column; } .navigation { display: flex; flex-direction: row; box-shadow: inset 0 -1px $tab-navigation-border-color; } .label { padding: $tab-label-v-padding $tab-label-h-padding; font-size: $tab-text-height; font-weight: $font-weight-semi-bold; line-height: 1; color: $tab-text-inactive-color; text-transform: uppercase; transition-timing-function: $animation-curve-default; transition-duration: $animation-duration; transition-property: box-shadow, color; &.active { color: $tab-text-color; } &.disabled { opacity: $tab-label-disabled-opacity; } &:not(.disabled) { cursor: pointer; } &.hidden { display: none; } } .pointer { position: absolute; width: 0; height: $tab-pointer-height; margin-top: - $tab-pointer-height; background-color: $tab-pointer-color; transition-timing-function: $animation-curve-default; transition-duration: $animation-duration; transition-property: left, width; } .tab { display: flex; flex-direction: column; padding: $tab-label-v-padding $tab-label-h-padding; &:not(.active) { display: none; } &.active { display: block; } }