.countries-container {
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 2em;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow-y: auto;
    background-color: color(var(--white-color) alpha(95%));
    transition: opacity 0.7s easeOne, visibility 0.7s easeOne, z-index 0.7s easeOne;
    opacity: 0;
    visibility: hidden;
    z-index: -1;

    &.active {
        opacity: 1;
        visibility: visible;
        z-index: 1;

        & .countries-content {
            opacity: 1;
            transform: translateY(0%);
        }
    }

    & .countries-content {
        max-width: 960px;
        width: 100%;
        opacity: 0;
        transform: translateY(-10%);
        transition: opacity 0.7s easeOne, transform 0.7s easeOne;

        & .top-block {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2em;

            & .active-count {
                font-size: 1em;
                font-weight: 700;
                user-select: none;
                border-radius: 1.75em;
                padding: 0.5em 1.75em;
                border: 1px solid transparent;
                color: color(var(--grey-color) alpha(75%));
                background-color: color(var(--grey-color) alpha(15%));
                transition: color 0.7s easeOne, background-color 0.7s easeOne;

                &.yes {
                    color: #3464E0;
                    background-color: color(var(--blue-color) alpha(25%));
                }
            }

            & svg {
                width: 1.5em;
                height: 1.5em;
                cursor: pointer;
                fill: color(var(--grey-color) alpha(45%));
                transition: fill 0.5s easeOne;

                &:hover {
                    fill: #3464E0;
                }
            }
        }

        & .items {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            text-align: left;
            border-top: 1px solid var(--white-color-back);
            padding-top: 2em;

            & .country-item {
                display: flex;
                user-select: none;
                cursor: pointer;
                width: 25%;
                margin-bottom: 1em;
                overflow: hidden;
                align-items: center;
                color: color(var(--grey-color) alpha(50%));

                &.active {
                    color: #3464E0;

                    & .count {
                        color: color(var(--grey-color) alpha(75%));
                    }

                    & .ico-wrap {
                        border: 1px dashed color(var(--blue-color) alpha(75%));
                    }
                }

                & .ico-wrap {
                    margin-right: 0.5em;
                    border-radius: 1em;
                    padding: 2px;
                    border: 1px dashed transparent;
                    transition: border-color 0.5s easeOne;

                    & .ico {
                        width: 40px;
                        min-width: 40px;
                        height: 26px;
                        background-color: var(--white-color-back);
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: cover;
                        border-radius: 1em;
                    }
                }

                & .merge {
                    width: calc(100% - 48px);
                }

                & .name {
                    font-size: 0.9em;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-weight: 700;
                    transition: color 0.5s easeOne;
                }

                & .count {
                    font-size: 0.75em;
                    font-weight: 700;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    transition: color 0.5s easeOne;
                }
            }
        }

        & .tip {
            display: flex;
            align-items: center;
            margin-top: 1em;
            border-top: 1px solid var(--white-color-back);
            padding-top: 1.25em;
            user-select: none;

            & svg {
                width: 1.75em;
                height: 1.75em;
                fill: color(var(--grey-color) alpha(75%));
                margin-right: 1em;
            }

            & span {
                font-size: 0.9em;
                color: color(var(--grey-color) alpha(75%));

                & b {
                    margin-right: 0.5em;
                }
            }
        }
    }
}

.container.dark .countries-container {
    background-color: color(var(--neo-black-color) alpha(95%));

    & .countries-content {
        & .top-block {
            & .active-count {
                color: color(#ddd alpha(65%));
                background-color: color(#ddd alpha(5%));

                &.yes {
                    color: #3464E0;
                    background-color: color(var(--blue-color) alpha(25%));
                }
            }

            & svg {
                fill: color(#ddd alpha(45%));

                &:hover {
                    fill: #3464E0;
                }
            }
        }

        & .items {
            border-top: 1px solid color(var(--white-color) alpha(5%));

            & .country-item {
                color: color(#ddd alpha(45%));

                &.active {
                    color: #3464E0;

                    & .count {
                        color: color(#ddd alpha(85%));
                    }

                    & .ico-wrap {
                        border: 1px dashed color(var(--blue-color) alpha(75%));

                        & .ico {
                            background-color: color(#ddd alpha(5%));
                        }
                    }
                }
            }
        }

        & .tip {
            border-top: 1px solid color(var(--white-color) alpha(5%));

            & svg {
                fill: color(#ddd alpha(85%));
            }

            & span {
                color: color(#ddd alpha(85%));
            }
        }
    }
}