@import "../style-scss/import";

.mu-buttom-item {
    flex: 1;
    min-width: 80px;
    max-width: 168px;
    position: relative;
    height: 100%;
    color: $secondaryTextColor;
    padding: 0;
    background: none;
    appearance: none;
    text-decoration: none;
    border: none;
    outline: none;
    transition: all .4s $easeInOutFunction;
    user-select: none;
    padding: 6px;
    .mu-bottom-nav-shift & {
        color: rgba($alternateTextColor, .7);
        padding: 8px 12px 10px;
        min-width: 56px;
        max-width: 168px;
    }
}

.mu-buttom-item-wrapper {
    display: block;
    height: 100%;
}

.mu-bottom-item-active {
    padding-top: 6px;
    padding-bottom: 5px;
    .mu-bottom-item-text {
        font-size: 14px;
    }
    .mu-bottom-nav-shift & {
        flex: 1.7;
        min-width: 96px;
        max-width: 168px;
        padding-top: 6px;
        padding-bottom: 5px;
    }
}

.mu-bottom-item-text {
    display: block;
    text-align: center;
    font-size: 12px;
    transition: all .4s $easeOutFunction, color 0.3s, font-size 0.3s;
    backface-visibility: hidden;
    .mu-bottom-item-active & {
        color: $primaryColor;
    }
    .mu-bottom-nav-shift .mu-bottom-item-active & {
        color: $alternateTextColor;
    }
    .mu-bottom-nav-shift & {
        opacity: 0;
        transform: scale(1) translate3d(0, 6px, 0);
    }
    .mu-bottom-nav-shift .mu-bottom-item-active & {
        transform: scale(1) translate3d(0, 2px, 0);
        opacity: 1;
    }
}

.mu-bottom-item-icon {
    display: block;
    margin: auto;
    transition: all .45s $easeOutFunction;
    backface-visibility: hidden;
    width: 24px;
    .mu-bottom-item-active & {
        color: $primaryColor;
    }
    .mu-bottom-nav-shift .mu-bottom-item-active & {
        color: $alternateTextColor;
    }
    .mu-bottom-nav-shift & {
        transform: translate3d(0, 8px, 0);
    }
    .mu-bottom-nav-shift .mu-bottom-item-active & {
        transform: scale(1) translateZ(0);
    }
}