public-ui-kolibri

@use '../mixins/to-rem' as *;
@use '../mixins/indented-text' as *;
@use '../mixins/focus-outline' as *;

@layer kol-theme-component {
	.kol-details {
		display: grid;
		width: 100%;
		height: 100%;

		&__content {
			&.indented-text {
				@include indented-text;
				margin: to-rem(4) 0 0 to-rem(10.4);
			}
		}

		&__heading {
			margin: 0;
		}

		&__heading-button {
			.kol-icon {
				font-size: to-rem(19.2);
			}

			.kol-span {
				&__container {
					display: flex;
					gap: 0;
					text-align: left;
				}

				&__label {
					border-bottom-color: #000;
				}
			}

			.kol-button:focus-within {
				@include focus-outline;
				cursor: pointer;
			}
		}
	}
}