/*------------------------------------------------------------------------------

[0] Fix | Delete

28.0 - Site Icon

[1] Fix | Delete

------------------------------------------------------------------------------*/

[2] Fix | Delete

[3] Fix | Delete

.site-icon-section {

[4] Fix | Delete

--site-icon-removal: #b32d2e;

[5] Fix | Delete

}

[6] Fix | Delete

[7] Fix | Delete

.site-icon-preview {

[8] Fix | Delete

--site-icon-input-border: #8c8f94;

[9] Fix | Delete

--site-icon-preview-background: #fff;

[10] Fix | Delete

--site-icon-preview-browser-top: #dcdcde;

[11] Fix | Delete

--site-icon-preview-browser-bottom: #a7aaad;

[12] Fix | Delete

--site-icon-preview-browser-border: rgba(255, 255, 255, 0.2);

[13] Fix | Delete

--site-icon-address-bar-background: #f0f0f1;

[14] Fix | Delete

--site-icon-address-bar-close: #646970;

[15] Fix | Delete

--site-icon-address-bar-text: #3c434a;

[16] Fix | Delete

--site-icon-shadow-1: rgba(0, 0, 0, 0.1);

[17] Fix | Delete

--site-icon-shadow-2: rgba(0, 0, 0, 0.2);

[18] Fix | Delete

--site-icon-shadow-3: rgba(0, 0, 0, 0.5);

[19] Fix | Delete

[20] Fix | Delete

direction: initial;

[21] Fix | Delete

display: flex;

[22] Fix | Delete

height: 60px;

[23] Fix | Delete

padding: 8px 0 0 8px;

[24] Fix | Delete

align-items: flex-start;

[25] Fix | Delete

position: relative;

[26] Fix | Delete

overflow: hidden;

[27] Fix | Delete

box-sizing: border-box;

[28] Fix | Delete

border: 1px solid var(--site-icon-input-border);

[29] Fix | Delete

border-radius: 4px;

[30] Fix | Delete

background-color: var(--site-icon-preview-background);

[31] Fix | Delete

width: 275px;

[32] Fix | Delete

}

[33] Fix | Delete

[34] Fix | Delete

@media (prefers-color-scheme: dark) {

[35] Fix | Delete

.site-icon-preview {

[36] Fix | Delete

--site-icon-preview-browser-top: #2c3338;

[37] Fix | Delete

--site-icon-preview-browser-bottom: #111;

[38] Fix | Delete

--site-icon-address-bar-background: #3c434a;

[39] Fix | Delete

--site-icon-address-bar-close: #f0f0f1;

[40] Fix | Delete

--site-icon-address-bar-text: #f0f0f1;

[41] Fix | Delete

}

[42] Fix | Delete

}

[43] Fix | Delete

[44] Fix | Delete

.site-icon-preview.settings {

[45] Fix | Delete

height: 88px;

[46] Fix | Delete

padding: 16px 0 0 16px;

[47] Fix | Delete

width: 350px;

[48] Fix | Delete

margin: 0 0 16px 0;

[49] Fix | Delete

}

[50] Fix | Delete

[51] Fix | Delete

.site-icon-preview.crop {

[52] Fix | Delete

width: 258px;

[53] Fix | Delete

height: 100%;

[54] Fix | Delete

display: grid;

[55] Fix | Delete

grid-template-columns: 8px 1fr;

[56] Fix | Delete

grid-template-rows: 64px 1fr;

[57] Fix | Delete

padding-left: 0;

[58] Fix | Delete

row-gap: 16px;

[59] Fix | Delete

direction: inherit;

[60] Fix | Delete

}

[61] Fix | Delete

[62] Fix | Delete

.site-icon-preview.hidden {

[63] Fix | Delete

display: none;

[64] Fix | Delete

}

[65] Fix | Delete

[66] Fix | Delete

.site-icon-preview .direction-wrap {

[67] Fix | Delete

grid-template-columns: 44px 1fr;

[68] Fix | Delete

gap: 8px;

[69] Fix | Delete

display: grid;

[70] Fix | Delete

direction: ltr;

[71] Fix | Delete

height: 100%;

[72] Fix | Delete

width: 100%;

[73] Fix | Delete

}

[74] Fix | Delete

[75] Fix | Delete

.site-icon-preview.settings .direction-wrap {

[76] Fix | Delete

grid-template-columns: 58px 1fr;

[77] Fix | Delete

gap: 16px;

[78] Fix | Delete

}

[79] Fix | Delete

[80] Fix | Delete

.site-icon-preview:after {

[81] Fix | Delete

--after-size: 150%;

[82] Fix | Delete

aspect-ratio: 1/1;

[83] Fix | Delete

content: "";

[84] Fix | Delete

display: block;

[85] Fix | Delete

position: absolute;

[86] Fix | Delete

top: 0;

[87] Fix | Delete

left: 0;

[88] Fix | Delete

width: var(--after-size);;

[89] Fix | Delete

transform: translate(calc(var(--after-size) * -0.125), calc(var(--after-size) * -0.125));

[90] Fix | Delete

filter: blur(5px);

[91] Fix | Delete

opacity: 0.5;

[92] Fix | Delete

background: var(--site-icon-url);

[93] Fix | Delete

}

[94] Fix | Delete

[95] Fix | Delete

.site-icon-preview .app-icon-preview {

[96] Fix | Delete

aspect-ratio: 1/1;

[97] Fix | Delete

border-radius: 10px;

[98] Fix | Delete

box-shadow: 0 1px 5px 0 var(--site-icon-shadow-3);

[99] Fix | Delete

flex-shrink: 0;

[100] Fix | Delete

width: 100%;

[101] Fix | Delete

z-index: 1;

[102] Fix | Delete

}

[103] Fix | Delete

[104] Fix | Delete

.site-icon-preview-browser {

[105] Fix | Delete

display: flex;

[106] Fix | Delete

padding: 4px 4px 0 12px;

[107] Fix | Delete

align-items: flex-start;

[108] Fix | Delete

gap: 16px;

[109] Fix | Delete

flex: 1 0 0;

[110] Fix | Delete

z-index: 1;

[111] Fix | Delete

border-top-left-radius: 10px;

[112] Fix | Delete

border-top: 1px solid var(--site-icon-preview-browser-border);

[113] Fix | Delete

border-left: 1px solid var(--site-icon-preview-browser-border);

[114] Fix | Delete

background: linear-gradient(180deg, var(--site-icon-preview-browser-top) 0%, var(--site-icon-preview-browser-bottom) 100%);

[115] Fix | Delete

box-shadow: 0 10px 22px 0 var(--site-icon-shadow-2);

[116] Fix | Delete

}

[117] Fix | Delete

[118] Fix | Delete

.site-icon-preview .browser-buttons {

[119] Fix | Delete

width: 48px;

[120] Fix | Delete

height: 40px;

[121] Fix | Delete

fill: var(--site-icon-input-border);

[122] Fix | Delete

}

[123] Fix | Delete

[124] Fix | Delete

.site-icon-preview-tab {

[125] Fix | Delete

padding: 8px;

[126] Fix | Delete

align-items: center;

[127] Fix | Delete

gap: 8px;

[128] Fix | Delete

flex: 1 0 0;

[129] Fix | Delete

border-radius: 4px;

[130] Fix | Delete

background-color: var(--site-icon-address-bar-background);

[131] Fix | Delete

box-shadow: 0 1px 3px 0 var(--site-icon-shadow-1);

[132] Fix | Delete

display: grid;

[133] Fix | Delete

grid-template-columns: 24px auto 24px;

[134] Fix | Delete

}

[135] Fix | Delete

[136] Fix | Delete

.site-icon-preview-browser .browser-icon-preview {

[137] Fix | Delete

box-shadow: 0 0 20px 0 var(--site-icon-shadow-1);

[138] Fix | Delete

}

[139] Fix | Delete

[140] Fix | Delete

.site-icon-preview-tab > img,

[141] Fix | Delete

.site-icon-preview-tab > svg {

[142] Fix | Delete

width: 24px;

[143] Fix | Delete

height: 24px;

[144] Fix | Delete

}

[145] Fix | Delete

[146] Fix | Delete

.site-icon-preview-tab > svg {

[147] Fix | Delete

fill: var(--site-icon-address-bar-close);

[148] Fix | Delete

}

[149] Fix | Delete

[150] Fix | Delete

.site-icon-preview-site-title {

[151] Fix | Delete

color: var(--site-icon-address-bar-text);

[152] Fix | Delete

text-overflow: ellipsis;

[153] Fix | Delete

white-space: nowrap;

[154] Fix | Delete

overflow: hidden;

[155] Fix | Delete

font-weight: 500;

[156] Fix | Delete

}

[157] Fix | Delete

[158] Fix | Delete

.site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview {

[159] Fix | Delete

width: 64px;

[160] Fix | Delete

height: 64px;

[161] Fix | Delete

margin: 0;

[162] Fix | Delete

grid-column: 2;

[163] Fix | Delete

}

[164] Fix | Delete

[165] Fix | Delete

.site-icon-preview-crop-modal .site-icon-preview-browser {

[166] Fix | Delete

grid-column: 2;

[167] Fix | Delete

}

[168] Fix | Delete

[169] Fix | Delete

.site-icon-preview-crop-modal .image-preview-wrap {

[170] Fix | Delete

overflow: hidden;

[171] Fix | Delete

aspect-ratio: 1/1;

[172] Fix | Delete

}

[173] Fix | Delete

[174] Fix | Delete

.site-icon-preview-crop-modal .image-preview-wrap.browser {

[175] Fix | Delete

width: 24px;

[176] Fix | Delete

height: 24px;

[177] Fix | Delete

}

[178] Fix | Delete

[179] Fix | Delete

button.reset.remove-site-icon {

[180] Fix | Delete

color: var(--site-icon-removal);

[181] Fix | Delete

text-decoration: none;

[182] Fix | Delete

border-color: transparent;

[183] Fix | Delete

box-shadow: none;

[184] Fix | Delete

background: transparent;

[185] Fix | Delete

}

[186] Fix | Delete

[187] Fix | Delete

button.reset.remove-site-icon:focus,

[188] Fix | Delete

button.reset.remove-site-icon:hover {

[189] Fix | Delete

background: var(--site-icon-removal);

[190] Fix | Delete

color: #fff;

[191] Fix | Delete

border-color: var(--site-icon-removal);

[192] Fix | Delete

box-shadow: 0 0 0 1px var(--site-icon-removal);

[193] Fix | Delete

}

[194] Fix | Delete

[195] Fix | Delete

.site-icon-action-buttons {

[196] Fix | Delete

display: flex;

[197] Fix | Delete

flex-wrap: wrap;

[198] Fix | Delete

gap: 10px;

[199] Fix | Delete

}

[200] Fix | Delete

[201] Fix | Delete