/* 
-- nom: btn.css --
-- framework: loT --
-- grup: Components --
-- autor: A.Moseguí / TT22 --
-- versió: 26.2.0 --
-- dependència: init.css, text.css, th-plt.css, th-base.css --
*/

/* =============================================
   :ROOT
   ============================================= */
:root {
	/* PROPERTIES */

	/* Structure */
	--btn-gap: var(--sp-lg);
	--btn-direction: row;

	/* Dimensional */
	--btn-w: clamp(7rem, 6.5rem + 3vw, 10rem);
	--btn-h: clamp(2.5rem, 2.3rem + 1vw, 3rem);
	--btn-padding: 0;
	--btn-rd: var(--rd-sm);

	/* Visual */
	--btn-border-w: var(--bw-xs);
	--btn-shadow: none;
	--btn-backdrop: none;

	/* Text */
	--btn-fs: var(--step-2);
	--btn-fw: var(--fw-700);
	--btn-ff: var(--font-roboto);
	--btn-lh: normal;

	/* TRANSITION */
	--btn-transition: var(--transition-interactive);

	/* STATES */

	/* Hover */
	--btn-hover-border-w: var(--btn-border-w);
	--btn-hover-transform: none;

	/* Active */
	--btn-active-border-w: var(--btn-border-w);
	--btn-active-transform: none;

	/* Focus visible */
	--btn-focus-outline: var(--bw-sm) solid var(--cl-focus-ring);
	--btn-focus-offset: var(--sp-sm);

	/* Disabled */
	--btn-disabled-opacity: var(--OpacityMedium);

	/* Pressed */
	--btn-pressed-border-w: var(--btn-border-w);
}

/* =============================================
   CLASSE BASE
   ============================================= */
.btn {
	/* Colors de tema resolts aquí (no al :root); els modificadors
	   (flo, sgn, mark…) els reassignen a la mateixa classe. */
	--btn-bg: var(--cl-cp-bg-md);
	--btn-cl: var(--cl-cp-fg);
	--btn-border-cl: var(--cl-cp-border);
	/* Rings d'estat: deriven de --cl-cp-border (via --ring-state-*),
	   que varia per tema. Resolts aquí perquè la inversió local hi arribi. */
	--btn-hover-shadow: var(--ring-state-border-sm);
	--btn-active-shadow: var(--ring-state-border-sm);
	--btn-pressed-shadow: var(--ring-state-border-md);
	display: flex;
	flex-direction: var(--btn-direction);
	align-items: center;
	justify-content: center;
	gap: var(--btn-gap);
	cursor: pointer;
	width: var(--btn-w);
	height: var(--btn-h);
	padding: var(--btn-padding);
	line-height: var(--btn-lh);
	border-radius: var(--btn-rd);
	background-color: var(--btn-bg);
	color: var(--btn-cl);
	border: var(--btn-border-w) solid var(--btn-border-cl);
	box-shadow: var(--btn-shadow);
	backdrop-filter: var(--btn-backdrop);
	font-family: var(--btn-ff);
	font-size: var(--btn-fs);
	font-weight: var(--btn-fw);
	text-align: center;
	text-decoration: none;
	transition: var(--btn-transition);
}

.btn__icon {
	height: 1.2em;
	width: auto;
	flex-shrink: 0;
}

/* =============================================
   MODIFICADORS — TIPOLOGIA: size
   ============================================= */

.btn--size-ss {
	--btn-w: clamp(3.5rem, 3.0rem + 1.5vw, 4rem);
	--btn-h: clamp(1.8rem, 1.6rem + 1vw, 2.0rem);
	--btn-fs: var(--step-1);
}

.btn--size-s {
	--btn-w: clamp(5rem, 4.5rem + 2.5vw, 7rem);
	--btn-h: clamp(2rem, 1.8rem + 1vw, 2.5rem);
	--btn-fs: var(--step-1);
}

.btn--size-m {
	--btn-w: clamp(7rem, 6.5rem + 3vw, 10rem);
	--btn-h: clamp(2.5rem, 2.3rem + 1vw, 3rem);
	--btn-fs: var(--step-2);
}

.btn--size-l {
	--btn-w: clamp(10rem, 9rem + 4vw, 14rem);
	--btn-h: clamp(3rem, 2.8rem + 1vw, 3.5rem);
	--btn-fs: var(--step-3);
}

.btn--size-x {
	--btn-w: clamp(14rem, 12rem + 5vw, 18rem);
	--btn-h: clamp(3.5rem, 3.2rem + 1.5vw, 4.5rem);
	--btn-fs: var(--step-4);
}

.btn--size-pin-s {
	--btn-w: 2.2rem;
	--btn-h: 2.2rem;
}

.btn--size-pin-m {
	--btn-w: 4rem;
	--btn-h: 2.2rem;
}

.btn--size-adp-fit {
	--btn-w: auto;
	--btn-h: auto;
	--btn-padding: var(--sp-lg) var(--sp-xl);
	--btn-lh: 1.2;
}

.btn--size-adp-full {
	--btn-w: 100%;
	--btn-h: auto;
	--btn-padding: var(--sp-lg) var(--sp-xl);
	--btn-lh: 1.2;
}

/* =============================================
   MODIFICADORS — TIPOLOGIA: shp
   ============================================= */

.btn--shp-rect   { --btn-rd: 0; }
.btn--shp-round  { --btn-rd: var(--rd-sm); }
.btn--shp-pill   { --btn-rd: var(--rd-pill); }
.btn--shp-circle { --btn-rd: var(--rd-full); }

/* =============================================
   MODIFICADORS — TIPOLOGIA: txt-step
   ============================================= */

.btn--txt-step-s { --btn-fs: var(--step-1); }
.btn--txt-step-m { --btn-fs: var(--step-2); }
.btn--txt-step-l { --btn-fs: var(--step-3); }
.btn--txt-step-x { --btn-fs: var(--step-4); }

/* =============================================
   MODIFICADORS — TIPOLOGIA: txt-fw
   ============================================= */

.btn--txt-fw-400 { --btn-fw: var(--fw-400); }
.btn--txt-fw-700 { --btn-fw: var(--fw-700); }

/* =============================================
   MODIFICADORS — TIPOLOGIA: txt-font
   ============================================= */

.btn--txt-font-roboto    { --btn-ff: var(--font-roboto); }
.btn--txt-font-tangerine { --btn-ff: var(--font-tangerine); }
.btn--txt-font-nasa      { --btn-ff: var(--font-nasa); }

/* =============================================
   MODIFICADORS — TIPOLOGIA: mmd-icon
   ============================================= */

.btn--mmd-icon-none  { }
.btn--mmd-icon-left  { --btn-direction: row; }
.btn--mmd-icon-right { --btn-direction: row-reverse; }
.btn--mmd-icon-only  { --btn-gap: 0; }

/* =============================================
   MODIFICADORS — TIPOLOGIA: flo
   ============================================= */

.btn--flo-solid { }

.btn--flo-ghost {
	--btn-bg: transparent;
}

.btn--flo-glass {
	--btn-bg: rgba(var(--White), 0.15);
	--btn-backdrop: blur(var(--blur-m));
}

/* =============================================
   MODIFICADORS — TIPOLOGIA: mark
   ============================================= */

.btn--mark-none { }

.btn--mark-red,
.btn--mark-green,
.btn--mark-coral,
.btn--mark-gold,
.btn--mark-blue {
	position: relative;
	padding: var(--sp-md);
	isolation: isolate;
}

.btn--mark-red::before,
.btn--mark-green::before,
.btn--mark-coral::before,
.btn--mark-gold::before,
.btn--mark-blue::before {
	content: '';
	position: absolute;
	inset: var(--sp-md);
	border-radius: inherit;
	z-index: -1;
}

.btn--mark-red           { --btn-cl: var(--color-nearwhite); }
.btn--mark-red::before   { background-color: var(--color-red); }

.btn--mark-green         { --btn-cl: var(--color-nearwhite); }
.btn--mark-green::before { background-color: var(--color-green); }

.btn--mark-coral         { --btn-cl: var(--color-nearblack); }
.btn--mark-coral::before { background-color: var(--color-coral); }

.btn--mark-gold          { --btn-cl: var(--color-nearblack); }
.btn--mark-gold::before  { background-color: var(--color-gold); }

.btn--mark-blue          { --btn-cl: var(--color-nearwhite); }
.btn--mark-blue::before  { background-color: var(--color-blue); }

/* =============================================
   MODIFICADORS — TIPOLOGIA: sgn
   ============================================= */

.btn--sgn-none { }

.btn--sgn-danger {
	--btn-bg: var(--cl-error);
	--btn-cl: var(--color-nearwhite);
	--btn-border-cl: var(--color-nearblack);
}

.btn--sgn-success {
	--btn-bg: var(--cl-success);
	--btn-cl: var(--color-nearwhite);
	--btn-border-cl: var(--color-nearblack);
}

.btn--sgn-warning {
	--btn-bg: var(--cl-warning);
	--btn-cl: var(--color-nearblack);
	--btn-border-cl: var(--color-nearblack);
}

.btn--sgn-question {
	--btn-bg: var(--cl-question);
	--btn-cl: var(--color-nearblack);
	--btn-border-cl: var(--color-nearblack);
}

/* =============================================
   STATES
   ============================================= */

.btn:hover {
	box-shadow: var(--btn-hover-shadow);
	transform: var(--btn-hover-transform);
	border-width: var(--btn-hover-border-w);
}

.btn:active {
	box-shadow: var(--btn-active-shadow);
	transform: var(--btn-active-transform);
	border-width: var(--btn-active-border-w);
}

.btn:focus-visible {
	outline: var(--btn-focus-outline);
	outline-offset: var(--btn-focus-offset);
}

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: var(--btn-disabled-opacity);
	pointer-events: none;
	cursor: default;
}

.btn[aria-pressed="true"] {
	box-shadow: var(--btn-pressed-shadow);
	border-width: var(--btn-pressed-border-w);
}

/* =============================================
   MODIFICADORS — TIPOLOGIA: style
   ============================================= */

.btn--style-flat {
	--btn-border-w: var(--bw-xs);
	--btn-shadow: none;
	--btn-backdrop: none;
	--btn-hover-shadow: var(--ring-state-border-sm);
	--btn-hover-border-w: var(--btn-border-w);
	--btn-hover-transform: none;
	--btn-active-shadow: var(--ring-state-border-sm);
	--btn-active-border-w: var(--btn-border-w);
	--btn-active-transform: none;
	--btn-pressed-shadow: var(--ring-state-border-md);
	--btn-pressed-border-w: var(--btn-border-w);
}

.btn--style-3d {
	--btn-border-w: var(--bw-xs);
	--btn-shadow: var(--shadow-md);
	--btn-backdrop: none;
	--btn-hover-shadow: var(--shadow-lg);
	--btn-hover-border-w: var(--btn-border-w);
	--btn-hover-transform: translateY(-2px);
	--btn-active-shadow: var(--shadow-xs);
	--btn-active-border-w: var(--btn-border-w);
	--btn-active-transform: translateY(2px);
	--btn-pressed-shadow: var(--shadow-xs);
	--btn-pressed-border-w: var(--btn-border-w);
}

.btn--style-molded {
	--btn-border-cl: transparent;
	--btn-border-w: 0;
	--btn-shadow: var(--relief-molded-out);
	--btn-backdrop: none;
	--btn-hover-shadow: var(--relief-molded-in);
	--btn-hover-border-w: 0;
	--btn-hover-transform: none;
	--btn-active-shadow: var(--relief-molded-in);
	--btn-active-border-w: 0;
	--btn-active-transform: none;
	--btn-pressed-shadow: var(--relief-molded-in);
	--btn-pressed-border-w: 0;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 480px) {
	.btn--size-l {
		--btn-w: clamp(7rem, 6.5rem + 3vw, 10rem);
		--btn-h: clamp(2.5rem, 2.3rem + 1vw, 3rem);
		--btn-fs: var(--step-2);
	}
	.btn--size-x {
		--btn-w: clamp(10rem, 9rem + 4vw, 14rem);
		--btn-h: clamp(3rem, 2.8rem + 1vw, 3.5rem);
		--btn-fs: var(--step-3);
	}
}