@import "../../constants/style/color.scss";

.tag {
    font-family: 'Open Sans', serif;
    border: 1px solid;
    display: inline-block;
    border-radius: 2px;
    text-transform: uppercase;
    max-width: 120px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.sizeXs {
    padding: 1px;
    font-size: 8px;
}

.sizeS {
    padding: 0 2px;
    font-size: 9px;
}

.sizeM {
    padding: 1px 2px;
    font-size: 10px;
}

.sizeL {
    padding: 3px 3px;
    font-size: 12px;
}

.sizeXl {
    padding: 3px 3px;
    font-size: 14px;
}

.intentDefault {
    background: $ghost;
    border-color: $ghost;
    color: $default;

    &.isGhost {
        background: transparent;
        border-color: $default-ghost;
    }
}

.intentPrimary {
    background: $primary;
    border-color: $primary;
    color: $white;

    &.isGhost {
        background: transparent;
        border-color: $primary;
        color: $primary;
    }
}

.intentInfo {
    background: $info;
    border-color: $info;
    color: $info-text;

    &.isGhost {
        background: transparent;
        border-color: $info-text;
        color: $info-text;
    }
}

.intentSuccess {
    background: $success;
    border-color: $success;
    color: $white;

    &.isGhost {
        background: transparent;
        border-color: $success;
        color: $success;
    }
}

.intentWarning {
    background: $warning;
    border-color: $warning;
    color: $white;

    &.isGhost {
        background: transparent;
        border-color: $warning;
        color: $warning;
    }
}

.intentDanger {
    background: $danger;
    border-color: $danger;
    color: $white;

    &.isGhost {
        background: transparent;
        border-color: $danger;
        color: $danger;
    }
}

.intentSecondary {
    background: $secondary;
    border-color: $secondary;
    color: $white;

    &.isGhost {
        background: transparent;
        border-color: $secondary;
        color: $secondary;
    }
}


.tagListContainer {
    display: flex;
    flex-wrap: wrap;

    .tagListItem {
        margin: 4px;
    }

    .tag {
        max-width: none;
    }
}