@import url("/public/stylesheets/shared/components/form-input/button.css") layer(component);
/* form-scaffold는 button 기본 컴포넌트를 그대로 재사용한다. (전용 확장 없음)
 * 비레이어 규칙은 @layer feature 보다 우선해 덮어쓰이므로 scaffold 전용 스타일은 @layer scaffold 에 둔다.
 */

@layer scaffold {
	.search-button {
		width: fit-content;

		padding: 0.75rem 1.25rem;
		border: 1px solid var(--primary);
		border-radius: var(--curved);

		font-size: 1rem;
		line-height: 1.25rem;

		background-color: var(--primary);
		color: var(--text-inverse);
	}

	.reset-button {
		width: fit-content;

		padding: 0.75rem 1.25rem;
		border: 1px solid transparent;
		border-radius: var(--curved);

		font-size: 1rem;
		line-height: 1.25rem;

		background-color: var(--danger-ghost);
		color: var(--danger);
	}

	.filter-button {
		width: fit-content;

		padding: 1rem 1.25rem;
		padding-right: 2.75rem;
		border: 1px solid transparent;
		border-radius: var(--rounded);

		font-size: 1rem;
		font-weight: 500;
		line-height: 1.25rem;

		background-color: var(--white);
		color: var(--text);
	}

	/*
 * filter-button + affix(드롭다운)
 * - 마크업: .base-button-affix.has-suffix > button.filter-button + span.base-button-affix-suffix.base-button-affix-suffix-caret
 *   (장식-only 우측 아이콘에는 suffix-caret 을 붙이지 않는다 → shared 의 회전 규칙이 적용되지 않음).
 * - 회전: shared components/button.css 의 .is-expanded + .base-button-affix-suffix.base-button-affix-suffix-caret
 * - 래퍼 .is-expanded + 본문 aria-expanded: public/javascripts/features/component-sample/feature-button.js ([data-base-button-affix-toggle]).
 */

	@media screen and (max-width: 767px) {
		.filter-button {
			border-radius: var(--curved);
		}
	}

	.batch-button {
		width: fit-content;

		padding: 0;
		border: 1px solid transparent;
		border-radius: 0;

		font-size: 1rem;
		line-height: 1.25rem;

		background-color: transparent;
		color: var(--text);
	}

	/* .batch-button.export,
.batch-button.delete {
} */

	.confirm-button {
		width: fit-content;

		padding: 0.75rem 1.25rem;
		border: 1px solid var(--primary);
		border-radius: var(--curved);

		font-size: 1rem;
		line-height: 1.25rem;
		white-space: nowrap;
		text-align: center;

		background-color: var(--primary);
		color: var(--text-inverse);
	}

	@media screen and (max-width: 767px) {
		.confirm-button {
			width: 100%;
		}
	}

	/* submit은 기본적으로 primary 톤(create/update)으로 사용한다. */
	.confirm-button.create,
	.confirm-button.update {
		border: 1px solid var(--primary);

		background-color: var(--primary);
		color: var(--text-inverse);
	}

	/* delete는 ghost 톤으로 분리해 오조작을 줄인다. */
	.confirm-button.delete {
		border: 1px solid var(--border);

		background-color: var(--white);
		color: var(--text);
	}

	.confirm-button.delete:focus {
		border-color: var(--danger);
		outline: 2px solid var(--danger-soft);
		box-shadow: 0 0 0 2px var(--danger-ghost);
	}

	.go-back-button {
		width: fit-content;

		padding: 0.75rem 1.25rem;
		border: 1px solid var(--primary);
		border-radius: var(--curved);

		font-size: 1rem;
		line-height: 1.25rem;
		white-space: nowrap;

		background-color: var(--primary-ghost);
		color: var(--primary);
	}

	.cancel-button {
		width: fit-content;

		padding: 0.75rem 1.25rem;
		border: 1px solid transparent;
		border-radius: var(--curved);

		font-size: 1rem;
		line-height: 1.25rem;

		background-color: var(--danger-ghost);
		color: var(--danger);
	}

	.execute-button {
		width: fit-content;

		padding: 0.75rem 1.25rem;
		border: 1px solid transparent;
		border-radius: var(--curved);

		font-size: 1rem;
		line-height: 1.25rem;
		white-space: nowrap;

		background-color: var(--primary-ghost);
		color: var(--primary);
	}

	/* .execute-button.export,
.execute-button.load,
.execute-button.delegate
.execute-button.add-row
.execute-button.popup
 {
} */

	@media screen and (max-width: 767px) {
		.execute-button {
			width: 100%;
		}
	}

	.execute-button.change-password {
		border: 1px solid var(--primary);

		background-color: var(--primary);
		color: var(--text-inverse);
	}

	.text-anchor {
		display: inline-block;
		width: fit-content;

		font-size: 0.875rem;
		line-height: 0.875rem;
		font-weight: 400;
		text-decoration: underline;
		white-space: nowrap;

		color: var(--blue-gray-800);
		background-color: transparent;
	}

	.text-anchor.primary {
		color: var(--primary);
		background-color: transparent;
		border-color: transparent;
	}
	.text-anchor.primary-ghost {
		color: var(--primary-ghost);
		background-color: transparent;
		border-color: transparent;
	}

	/* 링크 hover는 공통 primary 톤으로 강조해 클릭 가능성을 명확히 전달한다. */
	.text-anchor:hover {
		color: var(--primary);
	}
}