@use '../../../../styles';

.nft-grid {
    &._layout-tile {
        .nft-grid__grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 156px;
            gap: 16px;
        }
    }

    &._layout-row {
        .nft-grid__grid > .nft-grid__grid-item {
            padding-top: 12px;
            margin-top: 12px;
            border-top: 1px solid styles.$neutral-800;

            &:first-child {
                border-top: none;
                padding-top: 0;
                margin-top: 0;
            }
        }
    }

    .nft-grid__header {
        display: flex;
        align-items: center;
        margin-bottom: 24px;

        .nft-grid__header-title {
            font-weight: 500;
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 0.25px;
            color: #000;
        }

        .nft-grid__header-controls {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-left: auto;
        }
    }

    .nft-grid__btn {
        @include styles.button-reset;
        color: styles.$neutral-600;

        &._active {
            color: styles.$primary;
        }
    }
}
