section.customizer > div.layers > div.shapeLayer
{
    display: none;
}



section.customizer > div.layers > div.shapeLayer > div.title
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    gap: 0.75rem;
}

section.customizer > div.layers > div.shapeLayer > div.title > div.back
{
    display: flex;
    gap: 0.5rem;
    cursor: pointer;
}

section.customizer > div.layers > div.shapeLayer > div.title > div.back > img
{
    width: 24px;
    margin-right: 0.1rem;
    rotate: 90deg;
}

section.customizer > div.layers > div.shapeLayer > div.title > p.label
{
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
}




section.customizer > div.layers > div.shapeLayer > div.content
{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    padding-bottom: 2rem;
    line-height: 1.5;
}

section.customizer > div.layers > div.shapeLayer > div.content > div
{
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}


section.customizer > div.layers > div.shapeLayer > div.content > div > div.toggle
{
    opacity: 0.5;
}



section.customizer > div.layers > div.shapeLayer > div.content > div > div > div.button > img
{
    height: 24px;
}

section.customizer > div.layers > div.shapeLayer > div.content > div > div > div.button
{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

section.customizer > div.layers > div.shapeLayer > div.content > div > div > div.button::after,
section.customizer > div.layers > div.shapeLayer > div.content > div > div.selectImage > label::after
{
    content: attr(title);
    max-width: 50px;
    line-height: 1.2;
    padding-top: 0.5rem;
    text-align: center;
}





section.customizer > div.layers > div.shapeLayer > div.content > div.slider
{
    gap: 0;
    flex-direction: column;
    display: none;
}

section.customizer > div.layers > div.shapeLayer > div.content > div.slider.show
{
    display: flex;
}

section.customizer > div.layers > div.shapeLayer > div.content > div.slider > canvas
{
    width: 75%;
    height: 58px;
}





section.customizer > div.layers > div.shapeLayer > div.content > div > div.selectImage > label
{
    border: none;
    outline: none;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

section.customizer > div.layers > div.shapeLayer > div.content > div > div.selectImage > label > img
{
    height: 24px;
}

section.customizer > div.layers > div.shapeLayer > div.content > div > div.selectImage > div.inputs
{
    display: none;
}



section.customizer > div.layers > div.shapeLayer > div.content > canvas.preview
{
    margin-top: 1rem;
    border: 1px dashed var(--customizerColorText);
    align-self: center;
    cursor: move;
    width: 200px;
    height: 200px;
    background: repeating-conic-gradient(#FFFFFF 0 25%, #EBEBEB 0 50%) 50% / 5px 5px; /* https://stackoverflow.com/a/65129916 */
}


section.customizer > div.layers > div.shapeLayer > div.content > p.description, 
section.customizer > div.layers > div.shapeLayer > div.content > p.smaller-than-preffered,
section.customizer > div.layers > div.shapeLayer > div.content > p.convert-to-cmyk
{
    font-size: 0.7rem;
    text-decoration: none;
    max-width: 250px;
    text-align: center;
}

section.customizer > div.layers > div.shapeLayer > div.content > p.smaller-than-preffered,
section.customizer > div.layers > div.shapeLayer > div.content > p.convert-to-cmyk
{
    display: none;
    gap: 0.25rem;
    text-align: center;
    align-items: center;
    flex-direction: column;
}

section.customizer > div.layers > div.shapeLayer > div.content > p.smaller-than-preffered
{
    align-self: center;
}

section.customizer > div.layers > div.shapeLayer > div.content > p.smaller-than-preffered > img
{
    filter: none !important;
    width: 16px;
}

@media screen and (max-width: 500px)
{
    section.customizer > div.layers > div.shapeLayer > div.content
    {
        max-width: 90vw;
    }
}