@use "./abstracts/mixins" as *;
@use "./abstracts/vars" as *;
@use "./base/fontawesome/font-awesome-mix-var" as *;
@use "./variants/tag-cloud/Links" as tagCloudLinks;
@use "./variants/tag-cloud/Texts" as tagCloudTexts;

.tag-cloud {
    .component-content {
        text-align: justify;
    }
    .tag-cloud-item {
        display: inline-block;
        vertical-align: middle;
        a {
            color: $tag-color;
            &:hover {
                color: $tag-color-active;
            }
        }
        &.xs {
            font-size: 0.9em;
        }
        &.s {
            font-size: 1.1em;
        }
        &.m {
            font-size: 1.3em;
        }
        &.l {
            font-size: 1.5em;
        }
        &.xl {
            font-size: 1.8em;
        }
        &.xxl {
            font-size: 2.0em;
        }
    }
    @include tagCloudLinks.links-styles;
    @include tagCloudTexts.texts-styles;
}