/* SwatchStyles.uss */

:root {
    --swatch-size: 36px; 
    --border-size-normal: 1px;
    
    --color-border-normal: #2A2A2A;
    
    --color-contour-outer: #00F0FF;
    --color-contour-inner: #006E75;
}

.palette-grid__container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.color-swatch {
    width: var(--swatch-size);
    height: var(--swatch-size);
    justify-content: center;
    align-items: center;
    
    border-left-width: var(--border-size-normal);
    border-right-width: var(--border-size-normal);
    border-top-width: var(--border-size-normal);
    border-bottom-width: var(--border-size-normal);
    border-left-color: var(--color-border-normal);
    border-right-color: var(--color-border-normal);
    border-top-color: var(--color-border-normal);
    border-bottom-color: var(--color-border-normal);
}

.color-swatch__inner-display {
    flex-grow: 1;
    width: 100%;
    height: 100%;
}

.swatch--out-top { 
    border-top-color: var(--color-contour-outer); 
    border-top-width: 2px; 
}

.swatch--out-bottom { 
    border-bottom-color: var(--color-contour-outer);
    border-bottom-width: 2px; 
}

.swatch--out-left { 
    border-left-color: var(--color-contour-outer); 
    border-left-width: 2px; 
}

.swatch--out-right { 
    border-right-color: var(--color-contour-outer); 
    border-right-width: 2px; 
}

.swatch--in-top { 
    border-top-color: var(--color-contour-inner); 
    border-top-width: 1.5px;
}

.swatch--in-bottom { 
    border-bottom-color: var(--color-contour-inner); 
    border-bottom-width: 1.5px; 
}

.swatch--in-left { 
    border-left-color: var(--color-contour-inner); 
    border-left-width: 1.5px; 
}

.swatch--in-right { 
    border-right-color: var(--color-contour-inner); 
    border-right-width: 1.5px; 
}

.palette-modifier-btn {
    width: var(--swatch-size);
    height: var(--swatch-size);
    font-size: 14px;
    -unity-font-style: bold;
    
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.swatch-fold-hover {
    cursor: pan;
}

.resize-handle {
    cursor: resize-horizontal;
}