@charset "utf-8";


/* --------------------------------------------------------------------------
   Common Controls
-------------------------------------------------------------------------- */

	.button, .icon-button {

		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border: 0;
		font-family: var(--font-family-primary);
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		user-select: none;
		appearance: none;
		transition: color var(--transition-default),
			background-color var(--transition-default),
			opacity var(--transition-default);

		&:focus-visible {
			outline: .125rem solid var(--color-brand-content-low);
			outline-offset: .125rem;
		}

		&:disabled,
		&[aria-disabled='true'],
		&.disabled {
			pointer-events: none;
			cursor: default;
			opacity: .4;
		}

	}


/* --------------------------------------------------------------------------
   Button
-------------------------------------------------------------------------- */

	.button {

		height: 3rem;
		padding: 0 var(--space-16);
		border-radius: var(--radius-400);
		font-size: var(--font-size-body-m);
		font-weight: var(--font-weight-regular);
		line-height: var(--line-height-body-m);

		&.large {
			height: 3.75rem;
			padding: 0 1.75rem;
			border-radius: var(--radius-500);
			font-size: var(--font-size-body-l);
			line-height: var(--line-height-body-l);
		}

		&.primary {

			color: var(--color-neutral-content-inverse-high);
			background: var(--color-brand-primary);

			&:hover {
				background: var(--color-brand-primary-hover);
			}

		}

		&.secondary {

			color: var(--color-brand-primary);
			background: var(--color-brand-surface-low);

			&:hover {
				background: var(--color-brand-surface-medium);
			}

		}

	}


/* --------------------------------------------------------------------------
   Icon Button
-------------------------------------------------------------------------- */

	.icon-button {

		width: 3rem;
		aspect-ratio: 1;
		flex: none;
		padding: 0;
		background: var(--color-neutral-white);
		border-radius: var(--radius-300);

		&:hover {
			background: var(--color-brand-surface-low);
		}

		img {
			display: block;
			width: 2rem;
			aspect-ratio: 1;
			object-fit: contain;
		}

	}