@mixin color-list-title($bg, $border) {
    padding: 16px 20px;
    min-width: 200px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    background-color: $bg;
    border-right: 1px solid $border;
    border-radius: 6px 0 0 6px;
}

@mixin color-image-card-title($bg, $icon-color) {
    padding: 16px 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    background-color: $bg;
    font-size: 16px;
    
    .semi-icon {
        color: $icon-color;
    }
}

.internationalization {

    &-icon {
        margin-right: 8px;
    }

    &-image-card {
        display: flex;
        flex-direction: column;
        border-radius: 6px;
        border: 1px solid var(--semi-color-border);
        flex: 1;

        &-title {
            padding: 20px;
            font-weight: 600;
            font-size: 18px;
            display: flex;
            align-items: center;
        }


        &-image {
            width: 100%;
            height: 180px;
        }

        &-description {
            padding: 20px;  
        }
    }

    &-color-image-card {
        display: flex;
        flex-direction: column;
        border-radius: 6px;
        margin-bottom: 24px;

        &-image {
            padding: 16px 20px 0 20px;
        }
        
        &-blue {
            border: 1px solid rgba(var(--semi-light-blue-1), 1);
            &-title {
                @include color-image-card-title(rgba(var(--semi-light-blue-0), 1), rgba(var(--semi-light-blue-5), 1));
            }
        }

        &-cyan {
            border: 1px solid rgba(var(--semi-cyan-1), 1);
            &-title {
                @include color-image-card-title(rgba(var(--semi-cyan-0), 1), rgba(var(--semi-cyan-5), 1));
            }
        }

        &-green {
            border: 1px solid rgba(var(--semi-green-1), 1);
            &-title {
                @include color-image-card-title(rgba(var(--semi-green-0), 1), rgba(var(--semi-green-5), 1));
            }
        }

        &-lime {
            border: 1px solid rgba(var(--semi-lime-1), 1);
            &-title {
                @include color-image-card-title(rgba(var(--semi-lime-0), 1), rgba(var(--semi-lime-5), 1));
            }
        }

        &-description {
            padding: 16px 20px;
            .gatsby-p {
                margin-bottom: 0 !important;
            }
        }
    }

    &-text-card {
        display: flex;
        flex-direction: column;
        border-radius: 6px;
        font-weight: 600;
        font-size: 16px;

        &-blue {
            border: 1px solid rgba(var(--semi-light-blue-1), 1);

            .internationalization-text-card-title {
                background-color: rgba(var(--semi-light-blue-0), 1);
            }

            .internationalization-text-card-description {
                border-top: 1px solid rgba(var(--semi-light-blue-1), 1);
            }
        }

        &-cyan {
            border: 1px solid rgba(var(--semi-cyan-1), 1);

            .internationalization-text-card-title {
                background-color: rgba(var(--semi-cyan-0), 1);
            }

            .internationalization-text-card-description {
                border-top: 1px solid rgba(var(--semi-cyan-1), 1);
            }
        }

        &-title {
            padding: 16px 20px;
        }

        &-description {
            padding: 20px;
            font-size: 16px;
        }
    }

    &-image-list {
        display: flex;
        border: 1px solid var(--semi-color-border);
        border-radius: 6px;
        margin-bottom: 24px;

        &-image {
            width: 240px;
            min-height: 240px;
        }

        &-title {
            font-size: 18px;
            font-weight: 600;
            padding: 24px;
        }

        &-description {
            padding: 0 24px;
        }
        
    }

    &-color-card {
        border-radius: 6px;
        flex: 1;

        &-blue {
            border: 1px solid rgba(var(--semi-light-blue-1), 1);
            &-title {
                @include color-image-card-title(rgba(var(--semi-light-blue-0), 1), rgba(var(--semi-light-blue-5), 1));
            }
        }

        &-green {
            border: 1px solid rgba(var(--semi-green-1), 1);
            &-title {
                @include color-image-card-title(rgba(var(--semi-green-0), 1), rgba(var(--semi-green-5), 1));
            }
        }

        &-orange {
            border: 1px solid rgba(var(--semi-orange-1), 1);
            &-title {
                @include color-image-card-title(rgba(var(--semi-orange-0), 1), rgba(var(--semi-orange-5), 1));
            }
        }

        &-violet {
            border: 1px solid rgba(var(--semi-violet-1), 1);
            &-title {
                @include color-image-card-title(rgba(var(--semi-violet-0), 1), rgba(var(--semi-violet-5), 1));
            }
        }


        &-description {
            padding: 16px 20px;
            margin-bottom: 0 !important;
        }
    }

    &-color-list {
        display: flex;
        flex-direction: row;
        border-radius: 6px;
        margin-bottom: 24px;
        height: 100%;

        &-violet {
            border: 1px solid rgba(var(--semi-violet-1), 1);
            &-title {
                @include color-list-title(rgba(var(--semi-violet-0), 1), rgba(var(--semi-violet-1), 1));
            }
        }

        &-indigo {
            border: 1px solid rgba(var(--semi-indigo-1), 1);
            &-title {
                @include color-list-title(rgba(var(--semi-indigo-0), 1), rgba(var(--semi-indigo-1), 1));
            }
        }

        &-blue {
            border: 1px solid rgba(var(--semi-light-blue-1), 1);
            &-title {
                @include color-list-title(rgba(var(--semi-light-blue-0), 1), rgba(var(--semi-light-blue-1), 1));
            }
        }

        &-cyan {
            border: 1px solid rgba(var(--semi-cyan-1), 1);
            &-title {
                @include color-list-title(rgba(var(--semi-cyan-0), 1), rgba(var(--semi-cyan-1), 1));
            }
        }

        &-description {
            padding: 16px 20px;
            margin-bottom: 0 !important;
        }
    }

}
