.tag {
    @apply inline-flex text-center w-auto h-auto items-center px-4 py-2 bg-white border border-solid border-gray;

    font-weight: 600;

    .icon {
        @apply text-red ml-2;
    }

    &-sm {
        @apply px-2 py-1 text-sm;
    }

    &-lg {
        @apply px-8 py-4;
    }

    &-black {
        @apply bg-black text-white;

        .icon {
            @apply text-white ml-2;
        }
    }

    &-red {
        @apply bg-red text-white;

        border: none;

        .icon {
            @apply text-white ml-2;
        }
    }

    &-white {
        @apply bg-white text-red;

        border: none;
        padding-left: 10px;
        padding-right: 10px;
    }

    &-round {
        border-radius: 40px;
    }

    &-red-outline {
        @apply text-red border-red;
    }

    &-green {
        @apply bg-green text-white;

        .icon {
            @apply text-white ml-2;
        }
    }

    &-gray {
        @apply bg-gray;
    }
}

a.tag {
    @apply cursor-pointer;
}