.grid-list {
    gap: 0;
}
.grid-list__item {
    display: flex!important;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    color: currentColor!important;
    padding: 16px;
    border-bottom: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    transition: .3s;
}
.grid-list {
    border-top: 1px solid #E5E7EB;
    border-left: 1px solid #E5E7EB;
}
.grid-list__item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 8px;
    line-height: 1;
}
.grid-list__item__icon.--main {
    margin-left: auto;
    color: #D1D5DB;
    transition: .2s;
}
.grid-list__item__icon.--file {
    margin-left: auto;
}
.grid-list.--icon .grid-list__item__icon.--file {
    order: -1;
    flex-direction: column;
    margin-left: unset;
    gap: 4px;
}

.grid-list__item__icon svg {
    width: 20px;
    height: auto;
}
.grid-list.--icon .grid-list__item__icon.--file {
    margin-left: unset;
}
.grid-list__item__icon.--file svg {
    width: 12px;
}
.grid-list__item__file-type__ext {
    font-size: 10px;
}
.grid-list__item__icon.--add {
    position: relative;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    padding: 4px 6px;
    color: #9CA3AF;
    font-weight: 700;
    transition: .2s;
}
.grid-list__item__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.grid-list__item__desc {
    color: #6B7280;
    transition: .3s;
}

.grid-list__item:hover {
    background: var(--dark-blue-700, #2D1F5F);
    color: #fff!important;
}
.grid-list__item:hover .grid-list__item__desc {
    color: rgba(255,255,255,.65)!important;
}
.grid-list__item:hover .grid-list__item__icon.--add {
    color: rgba(255, 255, 255, .55);
    border-color: rgba(255, 255, 255, .2);
}
.grid-list__item:not(.--file):hover .grid-list__item__icon.--main {
    transform: translate(2px, -2px);
}


.grid-list.--icon .grid-list__item__icon.--add {
    aspect-ratio: 1/1;
    width: 44px;
    min-width: 44px;
    aspect-ratio: 1/1;
    color: #6B7280;
    border-radius: 6px;
    background: #F3F4F6;
    border: none;
}
.grid-list.--icon .grid-list__item__icon.--file.--arch {
    color: #D97706;
}
.grid-list.--icon .grid-list__item__icon.--file.--doc {
    color: #2563EB;
}
.grid-list.--icon .grid-list__item__icon.--file.--pdf {
    color: #2563EB;
}
.grid-list.--icon .grid-list__item__icon.--file.--xls {
    color: #16A34A;
}
.grid-list.--icon .grid-list__item__icon.--file.--img {
    color: #2563EB;
}
.grid-list.--icon .grid-list__item__icon.--file.--ppt {
    color: #EA580C;
}
.grid-list.--icon .grid-list__item:hover .grid-list__item__icon.--add {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}


.grid-list-box.--boxed {
    border-radius: var(--b-radius--24);
    padding: 32px var(--sp-16-32);
}


.grid-list-box.bg--violet {
    background: var(--dark-blue-700,#2D1F5F);
    color: #fff!important;
}
.grid-list-box.bg--violet .grid-list__header__title {
    color: #fff!important;
}
.grid-list-box.bg--violet .grid-list__header__desc {
    color: rgba(255,255,255,.6);
}
.grid-list-box.bg--violet .grid-list__item {
    border-bottom-color: rgba(255, 255, 255, .12);
    border-right-color: rgba(255, 255, 255, .12);
}
.grid-list-box.bg--violet .grid-list {
    border-top-color: rgba(255, 255, 255, .12);
    border-left-color: rgba(255, 255, 255, .12);
}
.grid-list-box.bg--violet .grid-list__item__icon.--main {
    color: rgba(255,255,255,.25);
}
.grid-list-box.bg--violet .grid-list__item__icon.--add {
    color: rgba(255, 255, 255, .35);
    border-color: rgba(255, 255, 255, .15);
}
.grid-list-box.bg--violet .grid-list__item:hover {
    background: rgba(255,255,255,.1)
}
.grid-list-box.bg--violet .grid-list__item:hover .grid-list__item__icon.--main {
    color: rgba(255, 255, 255, .5);
}
.grid-list-box.bg--violet .grid-list__item:hover .grid-list__item__icon.--add {
    color: rgba(255, 255, 255, .65);
    border-color: rgba(255, 255, 255, .3);
}