public-ui-kolibri

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

@layer kol-theme-component {
	:host {
		--kolibri-spacing: #{to-rem(4)};
	}

	.kol-tabs {
		&__button-group {
			margin-bottom: to-rem(-1);
			border-bottom: 1px solid var(--color-grey-25);
		}

		.kol-button {
			margin-bottom: to-rem(-1);
			border: none;

			&:hover:not(:disabled) {
				.kol-span {
					color: var(--color-blue-130);
				}
			}

			&:focus .kol-span {
				outline: var(--color-blue-130) solid to-rem(2);
			}

			&.selected {
				.kol-span {
					color: var(--color-blue);
					box-shadow: 0 -3px var(--color-blue);
					border-color: var(--color-grey-25);
					border-style: solid;
					border-top-color: var(--color-blue);
					border-bottom-color: white;
					border-width: 1px;

					font-weight: var(--font-weight-bold);
				}
			}

			.kol-span {
				min-width: var(--a11y-min-size);
				min-height: var(--a11y-min-size);
				padding: to-rem(4);
			}
		}
	}
}