@import '../../styles/colors';

.ui.info-bar {
    color: color(colorInverse);
    display: block;
    padding: 22px 33px;
    position: relative;
    &.info-bar-color {
        &-one { background-image: linear-gradient(90deg, #329594 0%, #8BBD72 125%); } // done
        &-two { background-image: linear-gradient(-90deg, #C33580 -40%, #264075 60%, #00254D 106%); } // done
        &-three { background-image: linear-gradient(-90deg, #F08D52 0%, #C33580 61%); } // done
        &-four { background-image: linear-gradient(-90deg, #3FB79D 0%, #1C93C4 100%); } // done
        &-five { background-image: linear-gradient(-90deg, #EB4EA1 -30%, #9F57CD 15%, #1C93C4 103%) } // done
        &-six { background-image: linear-gradient(90deg, #C96D20 -15%, #F6984C 20%, #C33580 125%); } // done
        &-seven { background-image: linear-gradient(90deg, #56C4C4 -4%, #54CC86 52%, #3A8E5D 115%); } // done
        &-eight { background-image: linear-gradient(-90deg, #56C4C4 0%, #4095B6 33%, #134174 100%); } // done
        &-nine { background-image: linear-gradient(-90deg, #F99E49 -13%, #C33580 16%, #134174 100%); } // done
        &-ten { background-image: linear-gradient(-90deg, #4095B6 0%, #134174 100%); } // done
        &-eleven { background-image: linear-gradient(90deg, #4D9DF5 0%, #5C34FF 100%);}
    }
    .info-bar-drawer {
        height: 100%;
        left: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 100%;
        .inner-container {
            background-color: rgba(255, 255, 255, .7);
            bottom: 0;
            color: color(color);
            left: 0;
            position: absolute;
            transform: translate(0, 100%);
            transition: transform 150ms ease-out;
            width: 100%;
            z-index: 1;
            > div { padding: 22px; }
        }
    }
        .info-bar-drawer-toggle {
            position: absolute;
            right: 22px;
            top: -38px;
            z-index: 2;
        }
        .info-bar-drawer-is-active .inner-container {
            transform: translate(0, 0%);
            .info-bar-drawer-toggle { top: 22px; }
        }
}