@import './var.scss';

:root {
    --tabbar-height: #{$tabbar-height};
    --tabbar-z-index: #{$tabbar-z-index};
    --tabbar-backgrond-color: #{$tabbar-backgrond-color};
    --tabbar-item-font-size: #{$tabbar-item-font-size};
    --tabbar-item-text-color: #{$tabbar-item-text-color};
    --tabbar-item-active-color: #{$tabbar-item-active-color};
    --tabbar-item-line-height: #{$tabbar-item-line-height};
    --tabbar-item-margin-bittom: #{$tabbar-item-margin-bittom};
}

.jing-tabbar {
    display: flex;
    width: 100%;
    height: var(--tabbar-height);
    background-color: var(--tabbar-backgrond-color);

    &--fixed {
        position: fixed;
        bottom: 0;
        left: 0;
    }

    &__item {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #646566;
        font-size: 12px;
        line-height: 1;
        cursor: pointer;

        &--active {
            .jing-tabbar__item--icon {
                span {
                    svg {
                        fill: var(--tabbar-item-active-color);
                        path {
                            fill: var(--tabbar-item-active-color);
                        }
                    }
                }
            }

            .jing-tabbar__item--title {
                color: var(--tabbar-item-active-color);
            }
        }

        &--icon {
            position: relative;
            margin-bottom: 4px;
            font-size: 22px;
        }
    }
}

.jing-tabbar-container {
    z-index: var(--tabbar-z-index);
    width: 100%;
    max-width: 500px;
    position: fixed;
    bottom: 0;
    background-color: var(--tabbar-backgrond-color);
}