@import '../Styles/styles.scss';

CosmeticList {
    position: relative;
    width: 100%;
    height: 100%;
    flex-direction: column;
    margin-left: 4px;
    padding: 8px;

    .cosmetics {
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        overflow: scroll;

        .row {
            gap: 8px;
        }
    }

    .cosmetic-preview {
        position: relative;
        width: 140px;
        height: 140px;
        background-color: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(16px);
        border-width: 2px;
        flex-shrink: 0;
        transition: all 0.1s;

        .lock-icon {
            position: absolute;
            font-size: 42px;
            color: rgba(255, 255, 255, 0.7);
            width: 100%;
            height: 100%;
            z-index: 10;
            padding: 8px;
        }

        .equipped {
            position: absolute;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            margin: 2px;
            padding: 4px;
            right: 0;
            font-weight: bold;
        }

        &:hover {
            border-width: 6px;
        }

        &.selected {
            border-width: 6px;
        }
    }

    .scrollbar {
        position: absolute;
        height: 462px;
        width: 12px;
        background-color: rgba(0, 0, 0, 0.8);
        left: -12px;
        padding: 2px;
        overflow: hidden;
        opacity: 0;
        transition: opacity 0.05s;

        .scrollbar-thumb {
            background-color: $selected;
            width: 100%;
        }

        &.show {
            opacity: 1;
        }
    }
}