:host
{
    display: inline-block;
    position: relative;
    margin: 0;
    min-height: 22px;
    min-width: 22px;
    
}
:host *
{
    box-sizing: border-box;
}

/* thumbnail list*/

ul.isketchit-thumbnail-list
{
    list-style-type: none;
    padding: 16px 0 0 16px;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}
ul.isketchit-thumbnail-list li
{
    display: inline-block;
    width: 200px;
    padding: 0;
    margin: 0 1.5rem 1.5rem 0;
    position: relative;
    outline-width: 1px;
    outline-style: solid;
    border-radius: 2px;
    width: 200px;
    position: relative;
    height: 124px;
}
ul.isketchit-thumbnail-list .thumbnail
{
    width: 100%;
    height: 100%;
    /*display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);*/
    object-fit: contain;
}

ul.isketchit-thumbnail-list .large-thumbnail-container
{
    position: absolute;
    left: -150px;
    top: 132px;
    display: none;
    padding-top: 1rem;
    z-index: 1;
    width: 400px;
    height: 248px;
}
ul.isketchit-thumbnail-list .large-thumbnail
{
    outline-width: 1px;
    outline-style: solid;
    border-radius: 2px;
    z-index: 1000;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

ul.isketchit-thumbnail-list li.selected 
{
    outline-width: 1px;
    outline-style: solid;
}
ul.isketchit-thumbnail-list[themeStyle="dark"] li,
ul.isketchit-thumbnail-list[themeStyle="dark"] .large-thumbnail,
ul.isketchit-thumbnail-list[themeStyle="dark"] li.selected,
ul.isketchit-thumbnail-list[themeStyle="dark"] .delete-button
{
    outline-color: #c9c9c9;
}
ul.isketchit-thumbnail-list[themeStyle="dark"] li,
ul.isketchit-thumbnail-list[themeStyle="dark"] .large-thumbnail,
ul.isketchit-thumbnail-list[themeStyle="dark"] li.selected
{
    background-color: rgba(0, 0, 0, 0.85);
}
ul.isketchit-thumbnail-list[themeStyle="light"] li,
ul.isketchit-thumbnail-list[themeStyle="light"] .large-thumbnail,
ul.isketchit-thumbnail-list[themeStyle="light"] li.selected,
ul.isketchit-thumbnail-list[themeStyle="light"] .delete-button
{
    outline-color: #333333;
}
ul.isketchit-thumbnail-list[themeStyle="light"] li,
ul.isketchit-thumbnail-list[themeStyle="light"] .large-thumbnail,
ul.isketchit-thumbnail-list[themeStyle="light"] li.selected
{
    background-color: rgba(255, 255, 255, 0.85);
}

ul.isketchit-thumbnail-list[themeStyle="dark"] .add-thumbnail
{
    color: #c9c9c9;
}

ul.isketchit-thumbnail-list[themeStyle="light"] .add-thumbnail
{
    color: #333333;
}

ul.isketchit-thumbnail-list li:first-of-type .large-thumbnail-container
{
    left: 0;
}
ul.isketchit-thumbnail-list li.hover .large-thumbnail-container
{
    display: block;
}
ul.isketchit-thumbnail-list .delete-button
{
    position: absolute;
    top: -12px;
    left: -12px;
    width: 24px;
    height: 24px;
    outline-width: 1px;
    outline-style: solid;
    border-radius: 12px;
    background-color: #ffffff;
    line-height: 24px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    cursor: default;
    user-select: none;
    display: none;
}
ul.isketchit-thumbnail-list .add-thumbnail
{
    line-height: 133px;
    text-align: center;
    font-size: 3rem;
    cursor: default;
}
ul.isketchit-thumbnail-list li.hover .delete-button
{
    display: block;
}
/* pickers */
.picker.container
{
    height: 32px;
    width: 32px;
}

.picker.container,
.picker .caption
{
    height: 32px;
    
}
.picker .caption
{
    opacity: 0.6;
}
.picker.hover .caption,
.picker .caption:hover
{
    opacity: 1;
}
.picker ul
{
    list-style-type: none;
    padding: 8px 0 0 8px;
    margin: 0;
    position: absolute;
    display: none;
    top: 36px;
}
.picker[themeStyle="dark"] ul
{
    background-color: rgba(255, 255, 255, 0.85);
}
.picker[themeStyle="light"] ul
{
    background-color: rgba(0, 0, 0, 0.85);
}
.picker.container.hover ul
{
    display: block;
    border: 1px green solid;
    border-radius: 7px;
}
.picker .caption,
.picker ul li
{
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    padding: 0;
}
.picker .caption
{
    width: 22px;
    height: 22px;
    margin: 5px;
}
.picker ul li 
{
    margin: 0 8px 8px 0;
    position: relative;
    outline-width: 1px;
    outline-style: solid;
}

/* color picker */
.isketchit-color-picker ul
{
    width: 162px;
    left: -70px;
}

/* line width picker */
.isketchit-line-width-picker ul
{
    width: 140px;
    left: -50px;
}

.isketchit-line-width-picker ul li
{
    width: 120px;
    padding-left: 10px;
    outline: none;
    margin-bottom: 0;
    height: 32px;
}
.isketchit-line-width-picker ul li:hover,
.isketchit-line-width-picker ul li.selected
{
    outline-width: 1px;
    outline-color: rgba(128, 128, 128, 1);
    outline-style: solid;
}

.isketchit-line-width-picker ul li svg
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
}
.picker[themeStyle="dark"].isketchit-line-width-picker ul li svg line
{
    stroke: #333333 !important;
}
.picker[themeStyle="light"].isketchit-line-width-picker ul li svg line
{
    stroke: #ffffff !important;
}

.picker[themeStyle="dark"] .caption svg line
{
    stroke: #ffffff !important;
}
.picker[themeStyle="light"] .caption svg line
{
    stroke: #333333 !important;
}

.picker[themeStyle="light"] ul li
{
    outline-color: rgba(204, 204, 204, 0.25);
}

.picker[themeStyle="light"] .caption
{
    outline: 1px rgba(204, 204, 204, 1) solid;
}

.picker[themeStyle="light"]  ul li.selected,
.picker[themeStyle="light"]  ul li:hover
{
    outline-width: 2px;
    outline-color: rgba(204, 204, 204, 1);
}

.picker[themeStyle="dark"] ul li 
{
    outline-color: rgba(51, 51, 51, 0.25);
}

.picker[themeStyle="dark"]  ul li.selected,
.picker[themeStyle="dark"]  ul li:hover
{
    outline-width: 2px;
    outline-color: rgba(51, 51, 51, 0.4);
}

/*cursor radius picker*/
.isketchit-radius-picker ul
{
    width: 112px;
    left: -32px;
}
.isketchit-radius-picker ul li,
.isketchit-radius-picker ul li:hover,
.isketchit-radius-picker ul li.selected
{
    border: none;
}
.isketchit-radius-picker ul li:hover svg,
.isketchit-radius-picker ul li.selected svg
{
    stroke: blue;
    stroke-width: 2px;
}

/*global alpha picker*/
.isketchit-global-alpha-picker ul
{
    width: 160px;
    left: -210px;
}
.isketchit-global-alpha-picker .caption,
.isketchit-global-alpha-picker ul li
{
    font-size: 1.1rem;
    line-height: 14px;
    text-align: center;
    font-weight: bold;
    color: black;
    padding: 4px;
    overflow: hidden;
}
.isketchit-global-alpha-picker ul li div,
.isketchit-global-alpha-picker .caption div
{
    color: black;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}