@import "../variables/fonts.scss";
@import "../variables/spacing.scss";

$medgo-tab-font-size: 16px;
$medgo-tab-font-weight: 500;
$medgo-tab-font-weight-active: 900;
$medgo-tab-padding: $padding * 2;
$medgo-tab-color: #fff;

.medgo-tab-element-animation {
    transition-duration: 100ms;
    transition-property: font-weight, border-bottom;
}

.medgo-tab-element {
    font-weight: $medgo-tab-font-weight;
    font-size: $medgo-tab-font-size;
    font-family: $font-family;
    padding-left: $medgo-tab-padding;
    padding-right: $medgo-tab-padding;
    color: $medgo-tab-color;
    padding-bottom: $medgo-tab-padding;
    opacity: 1;
    @extend .medgo-tab-element-animation;
}

.medgo-tab-element.is-active {
    font-weight: $medgo-tab-font-weight-active;
    border-bottom: 2px solid $medgo-tab-color;
    @extend .medgo-tab-element-animation;
}

.medgo-tab-element:hover {
    opacity: 0.8;
    @extend .medgo-tab-element-animation;
}

.medgo-tab-badge {
    position: relative;
    top: -10px;
    border-radius: 10px;
    padding: 3px 7px;
}