@ozdao/martyrs 0.2.571 → 0.2.572

package/src/styles/base/all.scss

@@ -1,233 +0,0 @@
-// _all.scss
-/*@use 'colors'; // Import the new colors module*/
-@use 'borders';
-@use 'scrolling';
-@use 'transitions';
-@use 'shadow_transitions_hover_refactor';
-
-.disabled {
-	opacity: 0.75 !important;
-	pointer-events: none !important;
-	cursor: default !important;
-	color: rgba(var(--black), 0.5) !important;
-}
-
-.unactive { opacity: 0.0; }
-.hide { display: block; position: absolute; opacity: 0; pointer-events: none; }
-
-.centered {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.centered-v {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.centered-h {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-
-body { 
-	.bs-black-small { box-shadow: 0px 0px 17px -3px rgba(var(--black), 0.1); }
-	
-	.w-auto { width: auto; }
-	.w-min { width: min-content; }
-	.w-fit { width: fit-content; }
-	.w-max { width: max-content; }
-	
-	.h-auto { height: auto; }
-	.h-min { height: min-content; }
-	.h-fit { height: fit-content; }
-	.h-max { height: max-content; }
-
-	.w-m-66r { width: min(100%, 66rem); }
-	.w-m-60r { width: min(100%, 60rem); }
-	.w-m-50r { width: min(100%, 50rem); }
-	.h-m-40r { height: min(100%, 40rem); }
-	.w-m-40r { width: min(100%, 40rem); }
-	.w-m-33r { width: min(100%, 33rem); }
-	.w-m-25r { width: min(100%, 25rem); }
-	.w-m-20r { width: min(100%, 20rem); }
-	.w-m-15r { width: min(100%, 15rem); }
-	.w-m-10r { width: min(100%, 10rem); }
-	.w-m-5r { width: min(100%, 5rem); }
-	.w-m-3r { width: min(100%, 3rem); }
-	.w-m-2r { width: min(100%, 2rem); }
-}
-
-body {
-	.rotate-90 { transform: rotate(90deg) }
-	.rotate-180 { transform: rotate(180deg) }
-}
-
-body { 
-	.cursor-pointer { cursor: pointer; }
-	.cursor-move { cursor: move; }
-	.cursor-text { cursor: text; }
-	.cursor-help { cursor: help; }
-	.cursor-wait { cursor: wait; }
-	.cursor-crosshair { cursor: crosshair; }
-	.cursor-not-allowed { cursor: not-allowed; }
-	.cursor-grab { cursor: grab; }
-	.cursor-grabbing { cursor: grabbing; }
-
-	.cursor-ns-resize { cursor: ns-resize; }
-	.cursor-ew-resize { cursor: ew-resize; }
-	.cursor-ne-resize { cursor: ne-resize; }
-	.cursor-nw-resize { cursor: nw-resize; }
-	.cursor-se-resize { cursor: se-resize; }
-	.cursor-sw-resize { cursor: sw-resize; }
-	
-	.cursor-n-resize { cursor: n-resize; }
-	.cursor-e-resize { cursor: e-resize; }
-	.cursor-s-resize { cursor: s-resize; }
-	.cursor-w-resize { cursor: w-resize; }
-}
-
-body {
-	
-	// Icon Classes
-	.i-extra { width: var(--extra); height: var(--extra); }
-	.i-big { width: var(--big); height: var(--big); }
-	.i-semi { width: var(--semi); height: var(--semi); }
-	.i-medium { width: var(--medium); height: var(--medium); }
-	.i-regular { width: var(--regular); height: var(--regular) }
-	.i-small { width: var(--small); height: var(--small) }
-	.i-thin { width: var(--thin); height: var(--thin) }
-	.i-micro { width: var(--micro); height: var(--micro) }
-	.i-nano { width: var(--nano); height: var(--nano) }
-
-	// REFACTOR
-	.i-base { width: 1rem; height: 1rem }
-	.i-default { width: var(--regular); height: var(--regular) }
-	.i-circle { padding: var(--small); border-radius: var(--extra); background: var(--light-main); overflow: visible; }
-	// REFACTOR
-	
-	// Aspect ratio
-	.aspect-16x9 { aspect-ratio: 16 / 9; }
-	.aspect-4x3 { aspect-ratio: 4 / 3; }
-	.aspect-1x1 { aspect-ratio: 1 / 1; }
-	
-	// Object-fit
-	.object-fit-cover { object-fit: cover; }
-	.object-fit-contain { object-fit: contain; }
-	.object-fit-fill { object-fit: fill; }
-	
-	// Interaction
-	.no-events { pointer-events: none }
-	
-	// Layout - Flex
-	.flex {
-		display: flex;
-		&-nowrap { flex-wrap: nowrap; }
-		&-wrap { flex-wrap: wrap; }
-		&-center { align-items: center; justify-content: center; }
-	}
-
-	.align-self-start { align-self: start; }
-
-	.flex-child {
-		&-none { flex: none; }
-		&-noresize { flex: 0 }
-		&-1 { flex: 1; }
-		&-auto { flex: auto; }
-		&-default { flex: 0 0 auto }
-		&-initial { flex: initial; }
-		&-grow-0 { flex-grow: 0; }
-		&-grow-1 { flex-grow: 1; }
-		&-grow-2 { flex-grow: 2; }
-		&-grow-3 { flex-grow: 3; }
-		&-shrink-0 { flex-shrink: 0; }
-		&-shrink-1 { flex-shrink: 1; }
-		&-basis-auto { flex-basis: auto; }
-		&-basis-0 { flex-basis: 0; }
-		&-order-0 { order: 0; }
-		&-order-1 { order: 1; }
-		&-order-2 { order: 2; }
-		&-order-3 { order: 3; }
-		&-order-4 { order: 4; }
-		&-order-5 { order: 5; }
-		&-order-6 { order: 6; }
-		&-order-7 { order: 7; }
-		&-order-8 { order: 8; }
-		&-order-9 { order: 9; }
-		&-order-last { order: 9999; }
-	}
-
-	// Grid/Columns
-	.cols-1 { display: grid; grid-template-columns: 1fr; }
-	.cols-2 {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		grid-auto-flow: dense;
-		> *:only-child { grid-column: 1 / -1; }
-	}
-	.cols-auto-1fr {
-		display: grid;
-		grid-template-columns: auto 1fr;
-		align-items: stretch;
-	}
-	.cols-2-fit-content { display: grid; grid-template-columns: fit-content(100%) 1fr; }
-	.cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
-	.cols-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
-	.cols-5 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
-	.cols-6 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
-	
-	.cols-2-golden-ration { display: grid; grid-template-columns: 1.66fr 1.33fr; }
-	.cols-2-2_1 { display: grid; grid-template-columns: 2fr 1fr; }
-	.cols-2-1_2 { display: grid; grid-template-columns: 1fr 2fr; }
-	.cols-2-1_2_1 { display: grid; grid-template-columns: 1fr 2fr 1fr; }
-	
-	.cols-2-1_3 {
-		display: grid;
-		grid-template-columns: 1fr 3fr;
-		grid-auto-flow: dense;
-		> *:only-child { grid-column: 1 / -1; }
-	}
-	
-	.cols-2-3_1 {
-		display: grid;
-		grid-template-columns: 3fr 1fr;
-		grid-auto-flow: dense;
-		> *:only-child { grid-column: 1 / -1; }
-	}
-	
-	.cols-2-1_4 { display: grid; grid-template-columns: 1fr 4fr; }
-	.cols-2-4_1 { display: grid; grid-template-columns: 4fr 1fr; }
-	
-	.col-w-100 { grid-column: 1 / -1 }
-	
-	.rows-1 { display: grid; grid-template-columns: 100%; grid-auto-rows: minmax(auto, max-content); }
-	.rows-1-min0_max1 { display: grid; grid-template-rows: minmax(0, 1fr); }
-	.rows-auto {
-		grid-auto-flow: row;
-		grid-auto-columns: auto;
-		grid-template-rows: auto;
-		grid-auto-rows: auto;
-	}
-	.rows-auto-1fr { grid-auto-rows: 1fr; }
-	
-	.grid { display: grid; }
-	
-	// Z-Index
-	.z-index-0 { z-index: 0; }
-	.z-index-1 { z-index: 10; }
-	.z-index-2 { z-index: 20; }
-	.z-index-3 { z-index: 30; }
-	.z-index-4 { z-index: 40; }
-	.z-index-5 { z-index: 50; }
-	.z-index-6 { z-index: 60; }
-	.z-index-7 { z-index: 70; }
-	.z-index-8 { z-index: 80; }
-	.z-index-9 { z-index: 90; }
-	.z-index-10 { z-index: 100; }
-	.z-index-1-negative { z-index: -10; }
-}

package/src/styles/base/backgrounds.scss

@@ -1,70 +0,0 @@
-body { 
-	// Colors
-	.bg-red         { background: rgb(var(--red));          }
-	.bg-red-nice    { background: rgb(var(--red-nice));     }
-	.bg-green       { background: rgb(var(--green));        }
-	.bg-green-nice  { background: rgb(var(--green-nice));   }
-	.bg-orange      { background: rgb(var(--orange));       } /* исправлено имя переменной */
-	.bg-orange-nice { background: rgb(var(--orange-nice));  } /* исправлено имя переменной */
-	.bg-yellow      { background: rgb(var(--yellow));       }
-	.bg-yellow-nice { background: rgb(var(--yellow-nice));  }
-	// Colors BG
-	.bg-youtube 	{ background: rgba(var(--youtube), 		1); }
-	.bg-telegram 	{ background: rgba(var(--telegram), 	1); }
-	.bg-twitter 	{ background: rgba(var(--twitter), 		1); }
-	.bg-reddit 		{ background: rgba(var(--reddit), 		1); }
-	.bg-instagram 	{ background: rgba(var(--instagram), 	1); }
-	// BG Blur
-	.bg-blur-extra 		{ backdrop-filter: blur(var(--extra)) 	}
-	.bg-blur-big 			{ backdrop-filter: blur(var(--big)) 		}
-	.bg-blur-semi 		{ backdrop-filter: blur(var(--semi)) 		}	
-	.bg-blur-medium 	{ backdrop-filter: blur(var(--medium)) 	}
-	.bg-blur-regular 	{ backdrop-filter: blur(var(--regular)) }
-	.bg-blur-small 		{ backdrop-filter: blur(var(--small)) 	}
-	.bg-blur-thin 		{ backdrop-filter: blur(var(--thin)) 		}
-	// Other
-	.bg-black-grad { background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%); }
-	.bg-grad-main { background: radial-gradient(84.52% 84.52% at 50% 50%, rgb(var(--main)) 23.39%, #E7FFF4 100%), #E8FFF3;}
-	.bg-grad-white { background:  linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);  }
-	// Transpatrens
-	.bg-t-white 	{ background: rgba(var(--white),0.1); 		}
-	.bg-t-grey 		{ background: rgba(var(--grey),0.1); 		}
-	.bg-t-darkgrey 	{ background: rgba(var(--darkgrey),0.1); 	}
-	.bg-transp  	{ background: rgba(var(--white),0); 		}
-	// Video Bg
-	.bg-video {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1;
-		object-fit: cover;
-	}
-	// Fills
-	.fill-l-main  	{ fill: var(--light-main); }
-	.fill-main  		{ fill: rgb(var(--main)); }
-	.fill-black  		{ fill: rgb(var(--black)); }
-	.fill-dark  		{ fill: var(--dark); }
-	.fill-grey  		{ fill: var(--grey); }
-	.fill-light  		{ fill: var(--light); }
-	.fill-card 			{ fill: #F7F7F7; }
-	.fill-card-blue { fill: #eef2f6; }
-	.fill-white  		{ fill: rgb(var(--white));; }
-	.fill-t-white 	{ fill: rgba(var(--white),0.1); }
-	.fill-t-grey  	{ fill: rgba(var(--grey),0.1); }
-	.fill-t-darkgrey{ fill: rgba(var(--darkgrey),0.1); }
-	.fill-transp  	{ fill: rgba(var(--white),0); }
-	// Colors Fills
-	.fill-blue 			{ fill: #0057FF; }
-	.fill-light-blue{ fill: #4E8AFF; }
-	.fill-lightblue { fill: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%), #BFD4FF; }
-	.fill-green 		{ fill: #25DA08; }
-	.fill-light-red { fill: var(--light-red); }
-	// Brand Fills
-	.fill-youtube 	{ fill: var(--youtube); }
-	.fill-telegram 	{ fill: var(--telegram); }
-	.fill-twitter 	{ fill: var(--twitter); }
-	.fill-reddit 		{ fill: var(--reddit); }
-	.fill-instagram { fill: var(--instagram); }
-}

package/src/styles/base/borders.scss

@@ -1,407 +0,0 @@
-body { 
-	hr {
-		width: 100%;
-		height: 1px;
-		background: rgba(0,0,0,0.1);
-		margin: 0;
-		border: none;
-
-		&.absolute {
-			position: absolute;
-			left: 0;
-			top: 0;
-		}
-	}
-
-	hr.vertical {
-		height: 100%;
-		width: 1px;
-		left: 0;
-		top: 0;
-		background: rgba(0,0,0,0.1);
-		margin: 0;
-		border: none;
-	}
-
-	// Border Classes - напрямую через box-shadow
-	.br-zero { 
-		box-shadow: none;
-	}
-	
-	.br-1px { 
-		box-shadow: inset 0 1px 0 0 currentColor,
-		           inset -1px 0 0 0 currentColor,
-		           inset 0 -1px 0 0 currentColor,
-		           inset 1px 0 0 0 currentColor;
-	}
-	
-	.br-2px { 
-		box-shadow: inset 0 2px 0 0 currentColor,
-		           inset -2px 0 0 0 currentColor,
-		           inset 0 -2px 0 0 currentColor,
-		           inset 2px 0 0 0 currentColor;
-	}
-	
-	/* Border style */
-	.br-solid { /* default for box-shadow */ }
-	.br-dash { 
-		border: 1px dashed currentColor;
-		box-shadow: none;
-	}
-	
-	/* Border sides */
-	.br-t { 
-		box-shadow: inset 0 1px 0 0 currentColor;
-	}
-	.br-r { 
-		box-shadow: inset -1px 0 0 0 currentColor;
-	}
-	.br-b { 
-		box-shadow: inset 0 -1px 0 0 currentColor;
-	}
-	.br-b-2px { 
-		box-shadow: inset 0 -2px 0 0 currentColor;
-	}
-	.br-b-3px { 
-		box-shadow: inset 0 -3px 0 0 currentColor;
-	}
-	.br-l { 
-		box-shadow: inset 1px 0 0 0 currentColor;
-	}
-	
-	/* Border colors с конкретными значениями */
-	.br-black {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgb(var(--black)); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgb(var(--black)); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgb(var(--black)); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgb(var(--black)); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgb(var(--black)); }
-		&.br-b-2px { box-shadow: inset 0 -2px 0 0 rgb(var(--black)); }
-		&.br-b-3px { box-shadow: inset 0 -3px 0 0 rgb(var(--black)); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgb(var(--black)); }
-	}
-	
-	.br-dark {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgb(var(--dark)); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgb(var(--dark)); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgb(var(--dark)); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgb(var(--dark)); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgb(var(--dark)); }
-		&.br-b-2px { box-shadow: inset 0 -2px 0 0 rgb(var(--dark)); }
-		&.br-b-3px { box-shadow: inset 0 -3px 0 0 rgb(var(--dark)); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgb(var(--dark)); }
-	}
-	
-	.br-main {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgb(var(--main)); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgb(var(--main)); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgb(var(--main)); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgb(var(--main)); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgb(var(--main)); }
-		&.br-b-2px { box-shadow: inset 0 -2px 0 0 rgb(var(--main)); }
-		&.br-b-3px { box-shadow: inset 0 -3px 0 0 rgb(var(--main)); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgb(var(--main)); }
-	}
-	
-	.br-second {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgb(var(--second)); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgb(var(--second)); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgb(var(--second)); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgb(var(--second)); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgb(var(--second)); }
-		&.br-b-2px { box-shadow: inset 0 -2px 0 0 rgb(var(--second)); }
-		&.br-b-3px { box-shadow: inset 0 -3px 0 0 rgb(var(--second)); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgb(var(--second)); }
-	}
-	
-	.br-grey {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgb(var(--grey)); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgb(var(--grey)); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgb(var(--grey)); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgb(var(--grey)); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgb(var(--grey)); }
-		&.br-b-2px { box-shadow: inset 0 -2px 0 0 rgb(var(--grey)); }
-		&.br-b-3px { box-shadow: inset 0 -3px 0 0 rgb(var(--grey)); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgb(var(--grey)); }
-	}
-	
-	.br-light {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgb(var(--light)); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgb(var(--light)); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgb(var(--light)); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgb(var(--light)); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgb(var(--light)); }
-		&.br-b-2px { box-shadow: inset 0 -2px 0 0 rgb(var(--light)); }
-		&.br-b-3px { box-shadow: inset 0 -3px 0 0 rgb(var(--light)); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgb(var(--light)); }
-	}
-	
-	.br-white {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgb(var(--white)); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgb(var(--white)); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgb(var(--white)); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgb(var(--white)); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgb(var(--white)); }
-		&.br-b-2px { box-shadow: inset 0 -2px 0 0 rgb(var(--white)); }
-		&.br-b-3px { box-shadow: inset 0 -3px 0 0 rgb(var(--white)); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgb(var(--white)); }
-	}
-	
-	.br-red {
-		&.br-1px { box-shadow: inset 0 0 0 1px red; }
-		&.br-2px { box-shadow: inset 0 0 0 2px red; }
-		&.br-t { box-shadow: inset 0 1px 0 0 red; }
-		&.br-r { box-shadow: inset -1px 0 0 0 red; }
-		&.br-b { box-shadow: inset 0 -1px 0 0 red; }
-		&.br-b-2px { box-shadow: inset 0 -2px 0 0 red; }
-		&.br-b-3px { box-shadow: inset 0 -3px 0 0 red; }
-		&.br-l { box-shadow: inset 1px 0 0 0 red; }
-	}
-	
-	// Border Grey transp
-	.br-grey-transp-50 {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgba(var(--grey), 0.50); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgba(var(--grey), 0.50); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgba(var(--grey), 0.50); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgba(var(--grey), 0.50); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgba(var(--grey), 0.50); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgba(var(--grey), 0.50); }
-	}
-	
-	.br-grey-transp-25 {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgba(var(--grey), 0.25); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgba(var(--grey), 0.25); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgba(var(--grey), 0.25); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgba(var(--grey), 0.25); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgba(var(--grey), 0.25); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgba(var(--grey), 0.25); }
-	}
-	
-	.br-grey-transp-10 {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgba(var(--grey), 0.10); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgba(var(--grey), 0.10); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgba(var(--grey), 0.10); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgba(var(--grey), 0.10); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgba(var(--grey), 0.10); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgba(var(--grey), 0.10); }
-	}
-	
-	// Border Black Transp - примеры для основных значений
-	.br-black-transp-5 {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgba(var(--black), 0.05); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgba(var(--black), 0.05); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgba(var(--black), 0.05); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgba(var(--black), 0.05); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgba(var(--black), 0.05); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgba(var(--black), 0.05); }
-	}
-	
-	.br-black-transp-10 {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgba(var(--black), 0.10); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgba(var(--black), 0.10); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgba(var(--black), 0.10); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgba(var(--black), 0.10); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgba(var(--black), 0.10); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgba(var(--black), 0.10); }
-	}
-	
-	.br-black-transp-20 {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgba(var(--black), 0.20); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgba(var(--black), 0.20); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgba(var(--black), 0.20); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgba(var(--black), 0.20); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgba(var(--black), 0.20); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgba(var(--black), 0.20); }
-	}
-	
-	.br-black-transp-50 {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgba(var(--black), 0.50); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgba(var(--black), 0.50); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgba(var(--black), 0.50); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgba(var(--black), 0.50); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgba(var(--black), 0.50); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgba(var(--black), 0.50); }
-	}
-	
-	// Border White Transp - примеры для основных значений
-	.br-white-transp-10 {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgba(var(--white), 0.10); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgba(var(--white), 0.10); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgba(var(--white), 0.10); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgba(var(--white), 0.10); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgba(var(--white), 0.10); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgba(var(--white), 0.10); }
-	}
-	
-	.br-white-transp-20 {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgba(var(--white), 0.20); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgba(var(--white), 0.20); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgba(var(--white), 0.20); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgba(var(--white), 0.20); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgba(var(--white), 0.20); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgba(var(--white), 0.20); }
-	}
-	
-	.br-white-transp-50 {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgba(var(--white), 0.50); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgba(var(--white), 0.50); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgba(var(--white), 0.50); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgba(var(--white), 0.50); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgba(var(--white), 0.50); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgba(var(--white), 0.50); }
-	}
-	
-	/* Social media brand borders */
-	.br-youtube {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgb(var(--youtube)); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgb(var(--youtube)); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgb(var(--youtube)); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgb(var(--youtube)); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgb(var(--youtube)); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgb(var(--youtube)); }
-	}
-	
-	.br-telegram {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgb(var(--telegram)); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgb(var(--telegram)); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgb(var(--telegram)); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgb(var(--telegram)); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgb(var(--telegram)); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgb(var(--telegram)); }
-	}
-	
-	.br-twitter {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgb(var(--twitter)); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgb(var(--twitter)); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgb(var(--twitter)); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgb(var(--twitter)); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgb(var(--twitter)); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgb(var(--twitter)); }
-	}
-	
-	.br-reddit {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgb(var(--reddit)); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgb(var(--reddit)); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgb(var(--reddit)); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgb(var(--reddit)); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgb(var(--reddit)); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgb(var(--reddit)); }
-	}
-	
-	.br-instagram {
-		&.br-1px { box-shadow: inset 0 0 0 1px rgb(var(--instagram)); }
-		&.br-2px { box-shadow: inset 0 0 0 2px rgb(var(--instagram)); }
-		&.br-t { box-shadow: inset 0 1px 0 0 rgb(var(--instagram)); }
-		&.br-r { box-shadow: inset -1px 0 0 0 rgb(var(--instagram)); }
-		&.br-b { box-shadow: inset 0 -1px 0 0 rgb(var(--instagram)); }
-		&.br-l { box-shadow: inset 1px 0 0 0 rgb(var(--instagram)); }
-	}
-	
-	/* Inset borders - special case */
-	.br-inset-2px-black { 
-		box-shadow: inset 0 0 0 2px rgb(var(--black));
-	}
-	
-	// Border anim
-	.br-anim { 
-		border: 1px dashed currentColor; 
-		animation: dash-animation 1s linear infinite;
-		box-shadow: none;
-	}
-
-	@keyframes dash-animation {
-	  0% {
-	    border-color-position: 0;
-	  }
-	  100% {
-	    border-color-position: 20px;
-	  }
-	}
-
-	// Glow effect
-	.br-glow {
-		position: relative;
-		box-shadow: inset 0 0 0 2px rgb(var(--white)),
-		           0px 0px 5px rgb(var(--white)), 
-		           0px 0px 10px rgb(var(--white)), 
-		           0px 0px 15px rgb(var(--white));
-	}
-
-	.br-glow-animation {
-		animation: glow-animation 2s ease-in-out infinite;
-	}
-
-	@keyframes glow-animation {
-    0%, 100% {
-        box-shadow: inset 0 0 0 2px rgb(var(--white)),
-                    0px 0px 5px rgba(var(--white), 0.5), 
-                    0px 0px 10px rgba(var(--white), 0.5), 
-                    0px 0px 15px rgba(var(--white), 0.5);
-    }
-	    50% {
-	        box-shadow: inset 0 0 0 2px rgb(var(--white)),
-	                    0px 0px 10px rgba(var(--white), 1), 
-	                    0px 0px 20px rgba(var(--white), 1), 
-	                    0px 0px 30px rgba(var(--white), 1);
-	    }
-	}
-
-	// Pulse effect
-	.br-pulse {
-		position: relative;
-		box-shadow: inset 0 0 0 2px #ffffff;
-		
-		&::after {
-			content: '';
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			pointer-events: none;
-			box-shadow: 0 0 0 0 #ffffff;
-			animation: pulse 2s infinite;
-		}
-	}
-
-	@keyframes pulse {
-	  0% {
-	    transform: scale(0.95);
-	    box-shadow: 0 0 0 0 #ffffff;
-	  }
-	  70% {
-	    transform: scale(1);
-	    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
-	  }
-	  100% {
-	    transform: scale(0.95);
-	    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
-	  }
-	}
-
-	// Spin effect
-	.br-spin {
-		position: relative;
-		
-		&::before {
-			content: '';
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			pointer-events: none;
-			box-shadow: inset 0 0 0 2px #ffffff;
-			animation: spin 2s linear infinite;
-		}
-	}
-
-	@keyframes spin {
-	  0% {
-	    transform: rotate(0deg);
-	  }
-	  100% {
-	    transform: rotate(360deg);
-	  }
-	}
-}