/*
实现Home页面风格的图标+文本上下或左右组合排列效果
*/

.icon-grid-horizontal,
.icon-grid-vertical,
.icon-grid {
    --grid-layout-margin: 20px 0;
    --icon-size: 40px;
    --font-size: 15px;
    --box-outline-width: 1px solid;
    --box-outline-initial-col: rgba(255, 0, 0, 0); /*方框未选中时的初始颜色*/
    --box-outline-hover-col: rgba(0, 120, 215, 0.4);
    --box-outline-radius: 6px;
    --fade-duration: 0.1s;
    --item-padding-vertical: 15px 10px;
    --item-padding-horizontal: 10px 10px;
    --icon-label-gap: 10px;
    --item-gap: 25px 6px;
}


.icon-grid-vertical,
.icon-grid {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin: var(--grid-layout-margin);
    gap: var(--item-gap);
    justify-content: flex-start;
    align-items: flex-start;
}
.icon-grid-vertical .icon-grid-group,
.icon-grid .icon-grid-group {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    padding: var(--item-padding-vertical);
    border-radius: var(--box-outline-radius);
    outline: var(--box-outline-width) var(--box-outline-initial-col);
    transition: background-color var(--fade-duration), outline-color var(--fade-duration);
}

.icon-grid-vertical .icon-grid-group:hover,
.icon-grid .icon-grid-group:hover,
.icon-grid-horizontal .icon-grid-group:hover {
    background-color: rgba(0, 120, 215, 0.15);
    outline: var(--box-outline-width) var(--box-outline-hover-col);
    cursor: pointer;
    text-decoration: none; /*显式取消文本选中的下划线*/
}

.icon-grid-vertical .icon-grid-item,
.icon-grid .icon-grid-item {
    width: 100px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.icon-grid-vertical .icon-grid-img,
.icon-grid .icon-grid-img {
    height: var(--icon-size);
    border-radius: 0;
}

.icon-grid-vertical .icon-grid-label,
.icon-grid .icon-grid-label {
    margin-top: var(--icon-label-gap);
    font-size: var(--font-size);
}

/* 水平布局 */
.icon-grid-horizontal {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    align-items: flex-start;
    gap: var(--item-gap);
    margin: var(--grid-layout-margin);
}

.icon-grid-horizontal .icon-grid-group {
    color: inherit;
    text-decoration: none;
    padding: var(--item-padding-horizontal);
    border-radius: var(--box-outline-radius);
    outline: var(--box-outline-width) var(--box-outline-initial-col);
    transition: background-color var(--fade-duration), outline-color var(--fade-duration);
}

.icon-grid-horizontal .icon-grid-item {
    width: auto;
    display: flex;
    align-items: center;
    gap: 3px; /* 横向布局增加额外的Gap*/
    flex-direction: row;
}

.icon-grid-horizontal .icon-grid-img {
    float: left;
    margin-right: var(--icon-label-gap);
    height: var(--icon-size);
    border-radius: 0;
}

.icon-grid-horizontal .icon-grid-label {
    font-size: var(--font-size);
    vertical-align: center;
}