/**
 * Border Utilities
 * Border radius, width, style, and color
 * Following Tailwind CSS notation
 */

/* ===== Border Radius (All Sides) ===== */
.rounded-none {
	border-radius: 0px;
}

.rounded-sm {
	border-radius: 0.125rem; /* 2px */
}

.rounded {
	border-radius: 0.25rem; /* 4px */
}

.rounded-md {
	border-radius: 0.375rem; /* 6px */
}

.rounded-lg {
	border-radius: 0.5rem; /* 8px */
}

.rounded-xl {
	border-radius: 0.75rem; /* 12px */
}

.rounded-2xl {
	border-radius: 1rem; /* 16px */
}

.rounded-3xl {
	border-radius: 1.5rem; /* 24px */
}

.rounded-full {
	border-radius: 9999px;
}

/* ===== Border Radius (Individual Sides) ===== */
/* Top */
.rounded-t-none {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

.rounded-t-lg {
	border-top-left-radius: 0.5rem; /* 8px */
	border-top-right-radius: 0.5rem; /* 8px */
}

/* Bottom */
.rounded-b-none {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.rounded-b-lg {
	border-bottom-left-radius: 0.5rem; /* 8px */
	border-bottom-right-radius: 0.5rem; /* 8px */
}

/* Left */
.rounded-l-none {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.rounded-l-lg {
	border-top-left-radius: 0.5rem; /* 8px */
	border-bottom-left-radius: 0.5rem; /* 8px */
}

/* Right */
.rounded-r-none {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.rounded-r-lg {
	border-top-right-radius: 0.5rem; /* 8px */
	border-bottom-right-radius: 0.5rem; /* 8px */
}

/* ===== Border Width (All Sides) ===== */
.border-0 {
	border-width: 0px;
}

.border {
	border-width: 1px;
}

.border-2 {
	border-width: 2px;
}

.border-4 {
	border-width: 4px;
}

.border-8 {
	border-width: 8px;
}

/* ===== Border Width (Individual Sides) ===== */
/* Top */
.border-t-0 {
	border-top-width: 0px;
}

.border-t-1 {
	border-top-width: 1px;
}

.border-t-2 {
	border-top-width: 2px;
}

.border-t-4 {
	border-top-width: 4px;
}

/* Right */
.border-r-0 {
	border-right-width: 0px;
}

.border-r-1 {
	border-right-width: 1px;
}

.border-r-2 {
	border-right-width: 2px;
}

.border-r-4 {
	border-right-width: 4px;
}

/* Bottom */
.border-b-0 {
	border-bottom-width: 0px;
}

.border-b-1 {
	border-bottom-width: 1px;
}

.border-b-2 {
	border-bottom-width: 2px;
}

.border-b-4 {
	border-bottom-width: 4px;
}

/* Left */
.border-l-0 {
	border-left-width: 0px;
}

.border-l-1 {
	border-left-width: 1px;
}

.border-l-2 {
	border-left-width: 2px;
}

.border-l-4 {
	border-left-width: 4px;
}

/* ===== Border Style ===== */
.border-solid {
	border-style: solid;
}

.border-dashed {
	border-style: dashed;
}

.border-dotted {
	border-style: dotted;
}

.border-double {
	border-style: double;
}

.border-none {
	border-style: none;
}

/* ===== Border Color ===== */
.border-black {
	border-color: #000000;
}

.border-white {
	border-color: #ffffff;
}

.border-grey {
	border-color: #e3e3e3;
}

.border-medium-grey {
	border-color: #b3b3b3;
}

.border-dark-grey {
	border-color: #666666;
}

.border-transparent {
	border-color: transparent;
}

.border-gradient {
	border-image: linear-gradient(to right, #398837 0%, #016269 80%) 1;
}

/* Gradient border with border-radius using pseudo-element */
.border-gradient-radius {
	position: relative;
	background: #fff; /* Change to match your background */
	border: none;
	border-radius: 10px;
}

.border-gradient-radius::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 10px;
	padding: 3px; /* Border width - adjust as needed */
	background: linear-gradient(to right, #398837 0%, #016269 80%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

/* Shimmer animation for gradient border - perfect for awards */
@keyframes border-shimmer {
	0% {
		background-position: -200% center;
	}
	100% {
		background-position: 200% center;
	}
}

/* Apply shimmer animation to border gradient */
.border-gradient-radius-shimmer::before {
	background: linear-gradient(
		90deg,
		#398837 0%,
		#398837 20%,
		#90EE90 40%,
		#90EE90 60%,
		#016269 80%,
		#016269 100%
	);
	background-size: 200% 100%;
	background-position: -200% center;
	animation: border-shimmer 5s linear;
	animation-timeline: view();
	animation-range: entry 0% cover 100%;
	/* animation-iteration-count: 2; */
}

/* ===== Responsive Border Radius ===== */
@media (max-width: 544px) {
	[class~="sm:rounded-none"] { border-radius: 0px !important; }
	[class~="sm:rounded-lg"] { border-radius: 0.5rem !important; }
	[class~="sm:rounded-full"] { border-radius: 9999px !important; }
	[class~="sm:rounded-t-none"] {
		border-top-left-radius: 0px !important;
		border-top-right-radius: 0px !important;
	}
	[class~="sm:rounded-b-none"] {
		border-bottom-left-radius: 0px !important;
		border-bottom-right-radius: 0px !important;
	}
}

@media (max-width: 781px) {
	[class~="md:rounded-none"] { border-radius: 0px !important; }
	[class~="md:rounded-lg"] { border-radius: 0.5rem !important; }
	[class~="md:rounded-full"] { border-radius: 9999px !important; }
	
	[class~="md:rounded-t-none"] {
		border-top-left-radius: 0px !important;
		border-top-right-radius: 0px !important;
	}
	
	[class~="md:rounded-t-lg"] {
		border-top-left-radius: 0.5rem !important;
		border-top-right-radius: 0.5rem !important;
	}
	
	[class~="md:rounded-b-none"] {
		border-bottom-left-radius: 0px !important;
		border-bottom-right-radius: 0px !important;
	}
	
	[class~="md:rounded-b-lg"] {
		border-bottom-left-radius: 0.5rem !important;
		border-bottom-right-radius: 0.5rem !important;
	}
	
	[class~="md:rounded-l-none"] {
		border-top-left-radius: 0px !important;
		border-bottom-left-radius: 0px !important;
	}
	
	[class~="md:rounded-l-lg"] {
		border-top-left-radius: 0.5rem !important;
		border-bottom-left-radius: 0.5rem !important;
	}
	
	[class~="md:rounded-r-none"] {
		border-top-right-radius: 0px !important;
		border-bottom-right-radius: 0px !important;
	}
	
	[class~="md:rounded-r-lg"] {
		border-top-right-radius: 0.5rem !important;
		border-bottom-right-radius: 0.5rem !important;
	}
}

@media (min-width: 782px) {
	[class~="lg:rounded-none"] { border-radius: 0px !important; }
	[class~="lg:rounded-lg"] { border-radius: 0.5rem !important; }
	[class~="lg:rounded-full"] { border-radius: 9999px !important; }
}

/* ===== Responsive Border Width ===== */
@media (max-width: 781px) {
	[class~="md:border-0"] { border-width: 0px; }
	[class~="md:border"] { border-width: 1px; }
	[class~="md:border-2"] { border-width: 2px; }
	
	[class~="md:border-t-0"] { border-top-width: 0px; }
	[class~="md:border-t-1"] { border-top-width: 1px; }
	[class~="md:border-t-2"] { border-top-width: 2px; }
	
	[class~="md:border-r-0"] { border-right-width: 0px; }
	[class~="md:border-r-1"] { border-right-width: 1px; }
	[class~="md:border-r-2"] { border-right-width: 2px; }
	
	[class~="md:border-b-0"] { border-bottom-width: 0px; }
	[class~="md:border-b-1"] { border-bottom-width: 1px; }
	[class~="md:border-b-2"] { border-bottom-width: 2px; }
	
	[class~="md:border-l-0"] { border-left-width: 0px; }
	[class~="md:border-l-1"] { border-left-width: 1px; }
	[class~="md:border-l-2"] { border-left-width: 2px; }
}

/* ===== Responsive Border Style ===== */
@media (max-width: 781px) {
	[class~="md:border-solid"] { border-style: solid; }
	[class~="md:border-dashed"] { border-style: dashed; }
	[class~="md:border-dotted"] { border-style: dotted; }
	[class~="md:border-none"] { border-style: none; }
}