public-ui-kolibri

@use '../mixins/to-rem' as *;

@layer kol-theme-component {
	.kol-tabs {
		display: grid;
		grid-template-columns: var(--grid-template-columns);
		grid-template-rows: var(--grid-template-rows);

		&--align-right {
			--display: grid;
			--grid-template-columns: 1fr auto;

			--button-group-display: grid;
			--button-group-order: 1;
		}

		&--align-left {
			--display: grid;
			--grid-template-columns: auto 1fr;

			--button-group-order: 0;
		}

		&--align-bottom {
			--display: flex;
			--grid-template-rows: 1fr auto;

			--button-group-gap: #{to-rem(32)};
			--button-group-order: 1;
		}

		&--align-top {
			--display: flex;
			--grid-template-rows: auto 1fr;

			--button-group-gap: #{to-rem(32)};
			--button-group-order: 0;
		}

		&__button-group {
			display: var(--display);

			gap: var(--button-group-gap);
			order: var(--button-group-order);
			flex-wrap: wrap;
		}

		.kol-button {
			color: var(--color-subtle);
			background-color: transparent;
			border-radius: var(--border-radius);
			min-width: var(--a11y-min-size);
			min-height: var(--a11y-min-size);
			padding: 0;

			font-size: to-rem(18);
			font-weight: 700;
			line-height: 1.2;
			border: none;
			font-style: normal;

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

			&.primary,
			&.selected {
				color: var(--color-primary);
			}

			&:not(&.selected) {
				.kol-span__container {
					padding-bottom: 0.25em;
				}
			}

			&.selected {
				.kol-span__container {
					border-bottom: 0.25em solid;
				}
			}

			.kol-span__container {
				gap: to-rem(8);
			}
		}

		&__content {
			padding: 0.25em 0;
		}

		&__panel {
			height: 100%;
		}

		.kol-button-wc {
			width: 100%;
		}
	}
}