@import url('../../variables.less');


/**********************************************************************************
To style the outermost wrapper element of tile widget.
***********************************************************************************/
.app-tile {
}


/**********************************************************************************
To style the skeleton of the tile widget.
***********************************************************************************/
.app-tile-skeleton {
}


.bg-danger.app-tile {
    background-color: @tileDangerColor;
}


.bg-info.app-tile {
    background-color: @tileInfoColor;
}


.bg-primary.app-tile {
    background-color: @tilePrimaryColor;
}


.bg-success.app-tile {
    background-color: @tileSuccessColor;
}


.bg-warning.app-tile {
    background-color: @tileWarningColor;
}


.bg-default.app-tile {
    background-color: var(--wm-tile-background);
}


.bg-danger.app-tile {
    background-color: var(--wm-tile-filled-danger-background);
}


.bg-info.app-tile {
    background-color: var(--wm-tile-filled-info-background);
}


.bg-primary.app-tile {
    background-color: var(--wm-tile-filled-primary-background);
}


.bg-secondary.app-tile {
    background-color: var(--wm-tile-filled-secondary-background);
}


.bg-tertiary.app-tile {
    background-color: var(--wm-tile-filled-tertiary-background);
}


.bg-success.app-tile {
    background-color: var(--wm-tile-filled-success-background);
}


.bg-warning.app-tile {
    background-color: var(--wm-tile-filled-warning-background);
}


.well.app-tile {
    background-color: @tileWellbgColor;
    border-color: @tileWellBorderColor;
}


.tile-template-text {
    color: @primaryContrastColor;
}

@import (optional) url('../../../wavemaker/design-tokens/container/tile.less');
@import (optional) url('../../../custom/components/container/tile.less');
@import (optional) url('../../../custom/os/components/container/tile.less');