ul.anticons-list {
    margin: 10px 0;
    overflow: hidden;
    list-style: none;
    li {
        position: relative;
        float: left;
        width: 16.66%;
        height: 100px;
        margin: 3px 0;
        padding: 10px 0 0;
        overflow: hidden;
        color: #555;
        text-align: center;
        list-style: none;
        background-color: #FFF;
        border-radius: 4px;
        cursor: pointer;
        transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
        .anticon {
            margin: 12px 0 8px;
            font-size: 36px;
            transition: transform 0.3s ease-in-out;
            will-change: transform;
        }
        .anticon-class {
            display: block;
            font-family: "Lucida Console", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
            white-space: nowrap;
            text-align: center;
            transform: scale(0.83);
            .ant-badge {
                transition: color 0.3s ease-in-out;
            }
        }
        &:hover {
            color: #FFF;
            background-color: @primary-color;
            .anticon {
                transform: scale(1.4);
            }
            .ant-badge {
                color: #FFF;
            }
        }
        &.outlined:hover {
            background-color: #8ECAFE;
        }
        &.copied:hover {
            color: rgba(255, 255, 255, 0.2);
        }
        &::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: #FFF;
            line-height: 110px;
            text-align: center;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
            content: "Copied!";
        }
        &.copied::after {
            top: -10px;
            opacity: 1;
        }
    }
}

.copied-code {
    padding: 2px 4px;
    font-size: 12px;
    background: #F5F5F5;
    border-radius: 2px;
}