@import '../../../../styles/theme/index.less';
@import '../../../../styles/core/list.less';
@import '../../../../styles/antd/input.less';
@import '../../../../styles/antd/pagination.less';
@import '../../../../styles/antd/form.less';
@import '../../../../styles/antd/select.less';
@import '../../../../styles/antd/button.less';
@import '../../../../styles/antd/popover.less';
@import '../../../../styles/antd/message.less';
@import '../../../../styles/antd/spin.less';
@import '../../../../styles/antd/table.less';

@mi-language: ~'@{mi-prefix}language';
@ant-table: ant-table;
@ant-input: ant-input;
@ant-tabs: ant-tabs;
@ant-pagination: ant-pagination;
@mi-list-search: ~'@{mi-prefix}list-search';

.@{mi-language} {
    position: relative;

    &-table {
        &-btns {
            .properties(min-width, 148);
            
            > a {
                .properties(padding-top, 4);
                .properties(padding-bottom, 4);
                .properties(padding-left);
                .properties(padding-right);
                .properties(margin-right);
                .border-radius();
                color: var(--mi-font, @mi-font);

                &:last-child {
                    margin-right: 0;
                }

                .anticon {
                    .properties(margin-right, 4);
                }
                
                &.edit {
                    background-color: var(--mi-success, @mi-success);
                }

                &.delete {
                    background-color: var(--mi-danger, @mi-danger);
                }

                &.edit,
                &.delete {
                    &:hover,
                    &:focus {
                        color: var(--mi-font, @mi-font);
                    }
                }
            }
        }
    }

    &-tabs {
        .flex();
        background: var(--mi-language-tabs-bg, @mi-language-tabs-bg);
        .properties(padding-top, 32);
        .properties(padding-bottom, 32);
        .properties(margin-top, -1);
        position: sticky;
        top: @mi-content-padding-top;
        z-index: 20;

        @media only screen and (max-width: 768px) {
            .properties(padding-bottom, 16);
        }
    }

    &-tab {
        .flex(center, center, column);
        .properties(margin-right, 16);
        .properties(padding-top, 16);
        .properties(padding-bottom, 16);
        .properties(padding-left);
        .properties(padding-right);
        border: 2px solid var(--mi-border, @mi-border);
        font-weight: bold;
        .border-radius(10);
        color: var(--mi-font, @mi-font);
        .linear-gradient-background();
        cursor: pointer;
        .properties(width, 120);
        .properties(height, 120);
        text-align: center;

        .anticon {
            .properties(font-size, 20);
            .properties(margin-bottom);
            .properties(padding, 16);
            .border-radius-circle();
            background-color: transparent;
            color: var(--mi-font, @mi-font);
        }

        &.active,
        &:hover,
        &:focus {
            color: var(--mi-theme, @mi-theme);
            border-color: var(--mi-theme, @mi-theme);
        }

        &.active {
            box-shadow: 0 0 4px;
        }

        &:first-child {
            .anticon {
                background-color: var(--mi-success, @mi-success);
            }

            &.active,
            &:hover,
            &:focus {
                color: var(--mi-success, @mi-success);
                border-color: var(--mi-success, @mi-success);
            }
        }

        &:nth-child(2) {
            .anticon {
                background-color: var(--mi-danger, @mi-danger);
            }

            &.active,
            &:hover,
            &:focus {
                color: var(--mi-danger, @mi-danger);
                border-color: var(--mi-danger, @mi-danger);
            }
        }

        &:nth-child(3) {
            margin-right: 0;

            .anticon {
                color: var(--mi-dark-grey, @mi-dark-grey);
                .linear-gradient-background-theme();
            }

            &.active,
            &:hover,
            &:focus {
                color: var(--mi-theme, @mi-theme);
                border-color: var(--mi-theme, @mi-theme);
            }
        }
    }

    &-list {
        .properties(padding-top, 4);
        .border-radius(10);
        overflow: hidden;
    }

    &-search {
        .properties(margin-bottom, 16);
    }

    &-cates {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .properties(grid-gap, 16);
    }

    &-cate {
        .linear-gradient-background();
        .properties(padding-left, 16);
        .properties(padding-right, 16);
        .properties(padding-top, 6);
        .properties(padding-bottom, 6);
        border: 1px solid var(--mi-border, @mi-border);
        .border-radius();
        .flex();
        position: relative;

        &-name {
            .properties(font-size, 14);
            text-align: justify;
        }

        &-close {
            position: absolute;
            .properties(right, -12);
            .properties(top, -12);
            .properties(width, 24);
            .properties(height, 24);
            .flex();
            cursor: pointer;

            .anticon {
                .properties(font-size, 18);
            }
        }

        &-edit {
            .properties(margin-left, 12);
            .properties(margin-right, 4);
            .flex();
            cursor: pointer;
        }

        &:last-child {
            margin-right: 0;
        }
    }

    &-modal {
        .@{mi-prefix}modal-close-x {
            .properties(margin-top, 8);
        }
    }

    &-pagination {
        .flex();
        width: 100%;
        .properties(padding-top, 32);
        .properties(padding-bottom, 24);
    }

    &-current-name {
        color: var(--mi-theme, @mi-theme);
    }

    .@{mi-list-search} {
        &-btns {
            .properties(top, 16 * 19.5);

            @media only screen and (max-width: 768px) {
                .properties(top, 16 * 18.5);
            }
        }
    }
}