@tailwind components;

@layer components {
	/* Typography */
	.title-screen-regular {
		@apply font-normal text-[2rem]/10;
	}

	.title-screen-bold {
		@apply font-bold text-[2rem]/10;
	}

	.title-section-regular {
		@apply font-normal text-[1.625rem]/8;
	}

	.title-section-bold {
		@apply font-bold text-[1.625rem]/8;
	}

	.title-subsection-regular {
		@apply font-normal text-[1.375rem]/7;
	}

	.title-subsection-bold {
		@apply font-bold text-[1.375rem]/7;
	}

	.title-body-regular {
		@apply font-normal text-lg/6;
	}

	.title-body-bold {
		@apply font-bold text-lg/6;
	}

	.body-regular {
		@apply font-normal text-base;
	}

	.body-bold {
		@apply font-bold text-base;
	}

	.body-small-regular {
		@apply font-normal text-sm;
	}

	.body-small-bold {
		@apply font-bold text-sm;
	}

	.callout-regular {
		@apply font-normal text-sm;
	}

	.callout-bold {
		@apply font-bold text-sm;
	}

	.link-large-regular {
		@apply font-normal text-base;
	}

	.link-regular {
		@apply font-normal text-sm;
	}

	/* Form Controls */
	.input-box {
		/* Using shadows to increase border size without impacting the surroundings */
		@apply outline-none
    rounded-[10px]
    bg-transparent

    /* border */
    /* border-primary-border  */
    /* shadow-[0_0_0_1px_#5d636f]  */

    /* hover:border-2 */
    /* hover:border-primary-border-hover */
    enabled:hover:shadow-[0_0_0_2px_#FF6FC8]

    /* focus:border-[3px] */
    /* focus:border-primary-border-accent */
    focus:!shadow-[0_0_0_3px_#E81899];
	}

	.input-box.withValidation {
		@apply outline-none;
	}

	.input-box.error {
		@apply !shadow;
		box-shadow: 0 0 0 3px var(--negative-sentiment) !important;
	}

	.input-box.success {
		box-shadow: 0 0 0 3px var(--positive-sentiment) !important;
	}

	.input-box.warning {
		box-shadow: 0 0 0 3px var(--warning-sentiment) !important;
	}

	.input-box.neutral {
		box-shadow: 0 0 0 1px var(--primary-border-dark) !important;
	}

	/* Tooltip */
	.dialog-tooltip {
		@apply rounded-[10px]
      w-[283px]
      p-[24px]
      bg-neutral-background
      text-primary-content
      box-shadow-small;

		letter-spacing: 0.14px;

		> div:first-of-type {
			@apply title-body-bold;
			padding-bottom: 8px;
		}
	}

	.dialog-tooltip-top {
		:before {
			content: '';
			position: absolute;
			height: 0px;
			width: 0px;
			top: 100%;
			left: 133px; /* (283px - 9px)/2 - 4px */
			border-width: 9px;
			border-color: transparent transparent transparent;
			border-style: solid;
			border-top: 9px solid var(--neutral-background);
		}
	}

	/* Separators */
	.h-sep {
		@apply divider h-[1px] border-divider-border;
	}

	.v-sep {
		@apply divider divider-horizontal w-[1px] border-divider-border;
	}

	.status-btn {
		@apply px-[20px]
      py-2
      rounded-full
      bg-transparent

      /* primary-interactive[#C8047D => pink-500] */
      shadow-[0_0_0_1px_#C8047D]

      /* primary-interactive-accent[#E81899 => pink-400] */
      hover:shadow-[0_0_0_2px_#E81899];
	}

	/* Other components */
	.overlay-backdrop {
		@apply modal-backdrop bg-overlay-background rounded-xl z-30;
	}

	.overlay-dialog {
		background-color: var(--overlay-dialog);
	}

	.chainselector {
		@apply /* background: var(--interactive-dark-tertiary, #444A55); */
    hover:background-color: var(--interactive-dark-tertiary-hover, #5D636F);
	}

	.glassy-gradient-card::before {
		@apply glassy-background;
		content: '';
		position: absolute;
		inset: 0%;
		z-index: -1;
	}

	input {
		border: 1px solid var(--primary-border);
	}

	h1 {
		color: var(--primary-content);
		text-align: center;
		/* Title Section/Bold */
		font-family: 'Clash Grotesk', sans-serif;
		font-size: 26px;
		font-style: normal;
		font-weight: 600;
		line-height: 32px; /* 123.077% */
		letter-spacing: -0.39px;
	}

	h2 {
		color: var(--primary-content);
		font-family: 'Clash Grotesk', sans-serif;
		font-size: 18px;
		font-style: normal;
		font-weight: 600;
		line-height: 24px; /* 133.333% */
		letter-spacing: 0.09px;
		margin-bottom: 8px;
	}

	button:disabled {
		cursor: not-allowed;
	}

	input:disabled {
		cursor: not-allowed;
	}

	.radio {
		border: 1px solid var(--primary-border-dark);
		&:checked {
			border: 1px solid var(--primary-interactive-accent);
		}
	}

	/* TODO: add more components here */
}
