.material-selector {
    width: 350px;
    max-height: 100%;
    height: 100%;
    display: block;
    
    & header {
        font-size: 30px;
        line-height: 1;
        margin: 75px 0 0;
        height: 75px;
        display: grid;
        gap: 20px;
        grid-template-columns: auto 1fr;
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
            "img txt1"
            "img txt2";
            
        & img {
            grid-area: img;
        }
        
        & .txt1 {    
            grid-area: txt2;
        }
        
        & .txt1 {
            grid-area: txt1;
        }
    }
    
    & > p {
        margin-top: 22px;
    }
    
    & .material-selector-buttons {
        margin: 30px 0 0;
        overflow-y: auto;
        max-height: 430px;
    }
    
    & .material-selector-button {
        padding: 3px 0;
        cursor: pointer;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        margin: 6px 10px 6px 0;
        
        &:hover {
            color: black;
        }
        
        & * {
            pointer-events: none;
        }
        
        & img {
            width: 18px;
            height: 36px;
            margin-right: 0;
            overflow: hidden;
            object-fit: cover;
            object-position: left;
            
            &:nth-child(2) {
                object-position: right;
                margin-right: 4px;
            }
        }
        & img.photo {
            width: 36px;
        }
        &[data-selected] {
            opacity: 0.5;
        }
    }
}