MaterialSellerUI {
    position: absolute;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-family: 'Baloo 2';

    .frame {
        align-items: center;
        justify-content: center;
        border-radius: 0 25px 0 25px;
        font-weight: bold;
        flex-direction: column;
        font-size: 25px;
        backdrop-filter-blur: 18px;
        cursor: default;
        max-height: 60%;
        height: 60%;
        width: 760px;
        min-width: 760px;
        position: relative;
        overflow: hidden;
        background-color: rgba(32, 34, 39, 0.95);
    }

    .header {
        border-radius: 0 25px 0 0;
        display: flex;
        width: 100%;
        padding: 1.5rem 2.5rem;
        background-color: rgba(32, 34, 39, 0.99);
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: 36px;
        gap: 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
        flex-shrink: 0;

        .header-child {
            align-items: center;
            gap: 1rem;
        }

        .close-btn {
            pointer-events: all;
            cursor: pointer;

            &:hover {
                color: red;
            }
        }

        .title {
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0.25rem;
        }
    }

    .legend-row {
        width: 100%;
        flex-shrink: 0;
        align-items: center;
        padding: 6px 2rem 6px 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.15rem;
        background-color: rgba(32, 34, 39, 0.99);

        .legend-item {
            flex: 1 1 0;
            padding-left: 48px;
            color: rgba(255, 255, 255, 0.85);
        }

        .legend-qty {
            flex: 0 0 110px;
            justify-content: center;
            color: rgba(255, 255, 255, 0.35);
        }

        .legend-unit {
            flex: 0 0 80px;
            justify-content: flex-end;
            padding-right: 4px;
            color: rgba(255, 255, 255, 0.9);
        }

        .legend-total {
            flex: 0 0 150px;
            justify-content: flex-end;
            padding-right: 12px;
            color: #dfa935;
        }

        .legend-action {
            flex: 0 0 72px;
        }
    }

    .container {
        background-color: rgba(32, 34, 39, 0.95);
        flex-direction: column;
        padding: 1rem 2rem;
        gap: 2px;
        overflow-y: scroll;
        overflow-x: hidden;
        flex: 1;
        min-height: 0;
        pointer-events: all;
        width: 100%;
    }

    .scrollbar-track {
        position: absolute;
        right: 4px;
        top: 110px;
        bottom: 110px;
        width: 6px;
        background-color: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        overflow: hidden;
    }

    .scrollbar-thumb {
        position: absolute;
        width: 6px;
        background-color: rgba(223, 169, 53, 0.5);
        border-radius: 10px;

        &:hover {
            background-color: rgba(223, 169, 53, 0.9);
        }
    }

    .item {
        width: 100%;
        justify-content: space-between;
        font-weight: 500;
        padding: 4px 8px 4px 8px;
        border-radius: 0 20px 0 20px;
        font-size: 22px;
        align-items: center;
        flex-shrink: 0;

        &:nth-child(odd) {
            background-color: rgba(220, 220, 220, 0.03);
        }

        .col {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .prefix {
            flex: 1 1 0;
            min-width: 0;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            padding-right: 8px;

            img {
                flex-shrink: 0;
                width: 38px;
                height: 38px;
            }

            .name {
                color: white;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .amount {
            flex: 0 0 90px;
            justify-content: flex-end;
            color: rgba(200, 200, 200, 0.6);
            font-weight: 400;
            font-size: 20px;
        }

        .per-piece {
            flex: 0 0 100px;
            justify-content: flex-end;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 400;
            font-size: 19px;
            padding-right: 4px;
        }

        .price {
            flex: 0 0 150px;
            justify-content: flex-end;
            font-weight: 800;
            color: #dfa935;
            padding-right: 12px;
        }

        .sell-btn {
            flex: 0 0 70px;
        }
    }

    .sell-btn {
        border-radius: 0 15px 0 15px;
        color: #dfa935;
        background-color: #1b1d22;
        justify-content: center;
        text-transform: uppercase;
        cursor: pointer;
        pointer-events: all;
        padding: 6px 10px;

        &:hover {
            color: #1b202c;
            background-color: #dfa935;
        }
    }

    .sell-all {
        font-weight: 500;
        font-size: 22px;
        border-radius: 0 25px 0 25px;
        flex-shrink: 0;
        flex: none;
        width: auto;
        align-self: center;
        background-color: rgba(32, 34, 39, 0.95);
        padding: 0.65rem 3rem;
        margin: 0.75rem 3rem;
    }
}