:root {
    --bg1-color: #f5f5f5; /* lightest background */
    --bg2-color: #e0e0e0;
    --bg3-color: #d4d4d4;
    --bg4-color: #c0c0c0;
    --bg5-color: #b0b0b0; /* darkest light background */
    --bg6-color: #f0f0f0;
    --bg7-color: #e9e9e9;
    --bg8-color: #fff;
    --search-btn-hover-bg-color: #00e382;
    --b503-text-color:#b87114;
    --text1-color: #222222; /* primary text */
    --text2-color: #111111; /* secondary text */

    --SearchIcon: url('../sprites/search-icon-ligth.png');
}

[data-theme="dark"] {
    --bg1-color: #333;
    --bg2-color: #444;
    --bg3-color: #222;
    --bg4-color: #2a2a2a;
    --bg5-color: #1e1e1e;
    --bg6-color: #303030;
    --bg7-color: #666;
    --bg8-color: #888;
    --search-btn-hover-bg-color: #002a15;
    --b503-text-color:#f3d05e;
    --text1-color: #f5f5f5;
    --text2-color: #fff;
    
    --SearchIcon: url('../sprites/search-icon-ligth.png');
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

#Appearance {
    display: flex;
    background-color: var(--bg3-color);
    color:val(--text1-color);
    padding:5px;
    flex-direction: column;
    gap:2px;
}

#Appearance label {
    background-color: var(--bg1-color);
    color:val(--text2-color);
    padding:5px;
    padding-left: 20px;
    border-radius: 20px;
}

#Appearance label select {
    background-color: var(--bg7-color);
    color:val(--text2-color);
    border: 2px solid var(--bg8-color);
    border-radius: 20px;
}

#Appearance label select option{
    color:val(--text2-color);
}/*not working :,v*/

#Appearance label select ::content{
    color:val(--text2-color);
    border-radius: 5px;
}/*not working :,v*/

#Appearance label input{
    background-color: var(--bg7-color);
    color:var(--text2-color);
    border: 2px solid var(--bg8-color);
    border-radius: 20px;
    text-align: center;
}

#Editor {
    display: flex;
    background-color: var(--bg4-color);
    color:val(--text1-color);
    padding:5px;
    flex-direction: column;
    gap:2px;
}

#Editor label {
    background-color: var(--bg2-color);
    color:val(--text2-color);
    padding:5px;
    padding-left: 20px;
    border-radius: 20px;
}

#Editor label input{
    background-color: var(--bg7-color);
    color:val(--text2-color);
    border: 2px solid var(--bg8-color);
    border-radius: 20px;
}/*not working :,v*/

#Interface {
    display: flex;
    background-color: var(--bg3-color);
    color:val(--text1-color);
    padding:5px;
    flex-direction: column;
    gap:2px;
}

#Interface label {
    background-color: var(--bg1-color);
    color:val(--text2-color);
    padding:5px;
    padding-left: 20px;
    border-radius: 20px;
}

#Interface label select {
    background-color: var(--bg7-color);
    color:val(--text2-color);
    border: 2px solid var(--bg8-color);
    border-radius: 20px;
}

#Changes {
    display: flex;
    background-color: var(--bg4-color);
    color:val(--text1-color);
    padding:5px;
    flex-direction: row;
    gap:2px;
}

#Changes button {
    background-color: var(--bg2-color);
    border: 1px solid var(--text1-color);
    border-radius: 20px;
    color: var(--text1-color);
    padding: 5px;
    transition: all 0.2s ease;
}

#Changes button:hover {
    background-color: var(--bg7-color);
    cursor: pointer;
}

#Changes button:active {
    transform: scale(0.95);
}

#themeGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.theme-option {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 12 / 9;
    background-color: var(--bg2-color);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

    padding: 5px;
    cursor: pointer;
    text-align: center;
    border: 2px solid transparent;
    transition: 0.15s;
}

.theme-option.selected {
    border-color: var(--text1-color);
}

.theme-preview {
    flex: 1;
    border-radius: 6px;
    border:1px solid var(--text1-color);
}
.theme-preview-bar {
    flex: 1;
    height:20px;
    border-radius: 6px 6px 0 0;
}
.theme-preview-button {
    position: relative;
    left: 5px;
    top: 2.5px;
    height:15px;
    aspect-ratio: 1;
    border-radius: 10px;
}
.theme-preview-content {
    flex: 1;
    height: calc(100% - 20px);
    display:flex;
    flex-direction: row;
}
.theme-preview-panel {
    flex: 1;
    border-radius: 0 0 0px 6px;
}
.theme-preview-text {
    display:flex;
    flex-direction: column;
    gap:2.5px;
}
.theme-preview-line1 {
    position: relative;
    left: 5px;
    top: 5px;
    height:7px;
    width:50%;
    border-radius: 5px;
}
.theme-preview-line2 {
    position: relative;
    left: 5px;
    top: 5px;
    height:7px;
    width:30%;
    border-radius: 5px;
}
.theme-preview-line3 {
    position: relative;
    left: 5px;
    top: 5px;
    height:7px;
    width:60%;
    border-radius: 5px;
}
.theme-preview-line4 {
    position: relative;
    left: 5px;
    top: 5px;
    height:7px;
    width:20%;
    border-radius: 5px;
}
.theme-preview-simple {
    flex: 1;
    display:flex;
    flex-direction: column;
}
.theme-preview-panel2 {
    flex: 1;
    border-radius: 0 0 0px 0px;
}
.theme-preview-panel3 {
    flex: 1;
    border-radius: 0 0 6px 0px;
}

#lightThemeOption .theme-preview {
    background-color: #b0b0b0;
}
#lightThemeOption .theme-preview-bar {
    background-color: #f5f5f5;
}
#lightThemeOption .theme-preview-panel {
    background-color: #b0b0b0;
}
#lightThemeOption .theme-preview-line1 {
    background-color: #222222;
}
#lightThemeOption .theme-preview-line2 {
    background-color: #222222;
}
#lightThemeOption .theme-preview-line3 {
    background-color: #222222;
}
#lightThemeOption .theme-preview-line4 {
    background-color: #222222;
}
#lightThemeOption .theme-preview-panel2 {
    background-color: #c0c0c0;
}
#lightThemeOption .theme-preview-panel3 {
    background-color: #e9e9e9;
}

#darkThemeOption .theme-preview {
    background-color: #1e1e1e;
}
#darkThemeOption .theme-preview-bar {
    background-color: #333;
}
#darkThemeOption .theme-preview-panel {
    background-color: #1e1e1e;
}
#darkThemeOption .theme-preview-line1 {
    background-color: #f5f5f5;
}
#darkThemeOption .theme-preview-line2 {
    background-color: #f5f5f5;
}
#darkThemeOption .theme-preview-line3 {
    background-color: #f5f5f5;
}
#darkThemeOption .theme-preview-line4 {
    background-color: #f5f5f5;
}
#darkThemeOption .theme-preview-panel2 {
    background-color: #2a2a2a;
}
#darkThemeOption .theme-preview-panel3 {
    background-color: #666;
}

.theme-label {
    margin-top: 6px;
    font-size: 14px;
}

.pallete-preview {
    height: 20px;
    display: flex;
    flex-direction: row;
    gap: 0px;

    /*
    1: #f5f5f5;
    2: #e0e0e0;
    3: #d4d4d4;
    4: #c0c0c0;
    5: #b0b0b0;
    6: #f0f0f0;
    7: #e9e9e9;
    8: #fff;
    9: #00e382;
    10:#b87114;
    11: #222222;
    12: #111111;
    */
}
#lightThemeOption .color[value="1"] {
    flex:1;
    background-color: #f5f5f5;
}
#lightThemeOption .color[value="2"] {
    flex:1;
    background-color: #e0e0e0;
}
#lightThemeOption .color[value="3"] {
    flex:1;
    background-color: #d4d4d4;
}
#lightThemeOption .color[value="4"] {
    flex:1;
    background-color: #c0c0c0;
}
#lightThemeOption .color[value="5"] {
    flex:1;
    background-color: #b0b0b0;
}
#lightThemeOption .color[value="6"] {
    flex:1;
    background-color: #f0f0f0;
}
#lightThemeOption .color[value="7"] {
    flex:1;
    background-color: #e9e9e9;
}
#lightThemeOption .color[value="8"] {
    flex:1;
    background-color: #fff;
}
#lightThemeOption .color[value="9"] {
    flex:1;
    background-color: #00e382;
}
#lightThemeOption .color[value="10"] {
    flex:1;
    background-color: rgb(255, 18, 136)
}
#lightThemeOption .color[value="11"] {
    flex:1;
    background-color: #222222;
}
#lightThemeOption .color[value="12"] {
    flex:1;
    background-color: #111111;
}

#darkThemeOption .color[value="1"] {
    flex:1;
    background-color: #333;
}
#darkThemeOption .color[value="2"] {
    flex:1;
    background-color: #444;
}
#darkThemeOption .color[value="3"] {
    flex:1;
    background-color: #222;
}
#darkThemeOption .color[value="4"] {
    flex:1;
    background-color: #2a2a2a;
}
#darkThemeOption .color[value="5"] {
    flex:1;
    background-color: #1e1e1e;
}
#darkThemeOption .color[value="6"] {
    flex:1;
    background-color: #303030;
}
#darkThemeOption .color[value="7"] {
    flex:1;
    background-color: #666;
}
#darkThemeOption .color[value="8"] {
    flex:1;
    background-color: #888;
}
#darkThemeOption .color[value="9"] {
    flex:1;
    background-color: #002a15;
}
#darkThemeOption .color[value="10"] {
    flex:1;
    background-color: #F5A;
}
#darkThemeOption .color[value="11"] {
    flex:1;
    background-color: #f5f5f5;
}
#darkThemeOption .color[value="12"] {
    flex:1;
    background-color: #fff;
}