@layer components-entities {
    .chips {
        display: flex;
        overflow: scroll;
        gap: 4px;
        flex-wrap: wrap;
        scrollbar-width: none
    }

    @media screen and (max-width: 1279px) {
        .chips {
            flex-wrap: nowrap;
            font-size: 12px
        }
    }.chips::-webkit-scrollbar {
         display: none;
         width: 0;
         height: 0
     }

    .chips__item {
        padding: 12px 20px;
        cursor: pointer;
        transition: color .4s, border .4s, background-color .4s;
        white-space: nowrap;
        border-radius: var(--br4);
        background-color: var(--gray)
    }

    .chips__item:hover {
        color: var(--secondary-blue);
        background-color: var(--tertiary-blue)
    }

    .chips__item_medium {
        display: flex;
        align-items: center;
        flex-grow: 1;
        justify-content: center;
        min-width: 118px;
        min-height: 56px;
        padding: 8px 16px
    }

    @media screen and (max-width: 1279px) {
        .chips__item_medium {
            font-size: 16px
        }
    }@media screen and (max-width: 1023px) {
    .chips__item_medium {
        min-width: unset;
        min-height: unset;
        font-size: 12px
    }
}.chips__item_transparent-primary-black {
     transition: color 0.4s;
     color: var(--primary-black);
     border: 1px solid var(--grey);
     background: var(--transparent)
 }

    .chips__item_transparent-primary-black:hover {
        color: var(--secondary-black);
        background: var(--transparent)
    }

    .chips__item_transparent-primary-blue {
        transition: color 0.4s;
        color: var(--primary-blue);
        border: 1px solid var(--tertiary-blue);
        background: var(--transparent)
    }

    .chips__item_transparent-primary-blue:hover {
        color: var(--secondary-black);
        background: var(--transparent)
    }

    .chips__item_transparent-primary-blue.active {
        background: var(--tertiary-blue)
    }

    .chips__item_transparent-grey {
        transition: color 0.4s, background 0.4s, border-color 0.4s;
        color: var(--grey);
        border: 1px solid var(--grey);
        background: var(--transparent)
    }

    .chips__item_transparent-grey:hover {
        border-color: var(--hover-bright-blue);
        background: var(--hover-bright-blue)
    }

    .chips__item_transparent-grey.active {
        color: var(--primary-white);
        background: var(--grey)
    }

    .chips__item_like-tertiary-black-text {
        padding: 0;
        color: var(--tertiary-black);
        background: inherit
    }

    .chips__item_like-tertiary-black-text:hover {
        color: var(--secondary-black);
        background: inherit
    }

    .chips__item_like-tertiary-black-text.js-chips-selected {
        color: var(--primary-black);
        background: inherit
    }

    .chips__item_like-tertiary-black-text.js-chips-selected:hover {
        color: var(--secondary-black);
        background: inherit
    }

    .chips__item_like-primary-white-text {
        padding: 0;
        color: var(--primary-white-70);
        background: inherit
    }

    .chips__item_like-primary-white-text:hover {
        color: var(--primary-white);
        background: inherit
    }

    .chips__item_like-primary-white-text.js-chips-selected {
        color: var(--primary-white);
        background: inherit
    }

    .chips__item_like-primary-white-text.js-chips-selected:hover {
        color: var(--primary-white);
        background: inherit
    }

    .chips__item_transparent-white {
        padding: 4px 20px 5px;
        transition: color 0.4s, background 0.4s, border-color 0.4s;
        text-align: center;
        color: var(--primary-black);
        border: none;
        background: var(--transparent)
    }

    .chips__item_transparent-white:hover {
        background: var(--hover-bright-blue)
    }

    .chips__item_transparent-white.js-chips-selected {
        color: var(--primary-black);
        background: var(--primary-white)
    }

    .chips__item_transparent-white.js-chips-selected:hover {
        color: var(--secondary-blue);
        background: var(--hover-bright-blue)
    }

    .chips__item_button-blue {
        color: var(--primary-black);
        border-radius: var(--br4);
        background: var(--primary-white)
    }

    .chips__item_button-blue:hover {
        background: var(--hover-bright-blue)
    }

    .chips__item_button-blue.js-chips-selected {
        background: var(--primary-blue)
    }

    .chips__item_button-blue.js-chips-selected:hover {
        color: var(--primary-white);
        background: var(--hover-dark-blue)
    }

    @media screen and (max-width: 1023px) {
        .chips__item_button-blue {
            padding: 12px 20px;
            border-radius: var(--br4);
            background-color: var(--gray)
        }

        .chips__item_button-blue:hover {
            color: var(--secondary-blue);
            background-color: var(--tertiary-blue)
        }

        .chips__item_button-blue.js-chips-selected {
            color: var(--primary-white);
            background-color: var(--secondary-black)
        }

        .chips__item_button-blue.js-chips-selected:hover {
            color: var(--primary-white);
            background-color: var(--secondary-black)
        }
    }@media screen and (min-width: 1024px) {
    .chips_column {
        align-items: flex-start;
        flex-direction: column;
        row-gap: 8px
    }
}.js-chips-selected {
     color: var(--primary-white);
     background-color: var(--secondary-black)
 }

    .js-chips-selected:hover {
        color: var(--primary-white);
        background-color: var(--secondary-black)
    }
}