@import './base/reset.less';
@import './default/variable.less';
@import './light/variable.less';
@import './dark/variable.less';

[class^='g-image-'] {
    position  : relative;
    object-fit: cover;
    overflow  : hidden;

    &:before {
        content        : '';
        position       : absolute;
        left           : 0;
        top            : 0;
        width          : 100%;
        height         : 100%;
        background     : url("~@mobile/assets/images/avatar.jpg") no-repeat center;
        background-size: cover;
    }
}

.g-flex {
    display       : flex;
    flex-direction: column;
    height        : 100%;

    &--row {
        flex-direction: row;
    }

    &__body {
        flex                      : 1;
        overflow-y                : auto;
        -webkit-overflow-scrolling: touch;
    }

    &__footer {
        margin-top: auto;
    }
}

.g-color {
    &--up {
        color: var(--color-up);
    }

    &--down {
        color: var(--color-down);
    }
}