@import '../colors';

ion-tab-bar {
    --background: transparent;
    background: linear-gradient(to right, darken($brand-blue, 10%), $brand-blue);
    --border: none;
    margin-top: -2px;
    box-shadow: 0px 0px 15px -2px darken($brand-blue, 20%);
    
    ion-tab-button {
        ion-icon {
            font-size: 25px;

            &:nth-child(1) {
                display: block;
                color: lighten($brand-blue, 30%);
            }

            &:nth-child(2) {
                display: none;
            }
        }

        &.tab-selected {
            ion-icon {
                &:nth-child(2) {
                    display: block;
                    color: lighten($green, 10%);
                }
    
                &:nth-child(1) {
                    display: none;
                }
            }
        }

        &:nth-child(2) {
            ion-icon {
                font-size: 30px;               
                border-radius: 50%;
                overflow: hidden;
            }
        }
    }
}