@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/breakpoints' as break;
@use '../../base/mixins/typography' as font;
@use '../../base/functions' as *;

.agenda {
	display: flex;
	flex-direction: column;
	gap: var(--padding-huge);

	&-items {
		max-width: brandui-col-spacing(4);
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: var(--padding-medium);

		@include break.max-mobile {
			margin: 0;
		}

		&.items-hide {
			display: none;
		}
	}

	&-item {
		display: flex;
		gap: var(--padding-extra-large);

		&-datetime {
			max-width: 100%;
			width: brandui-col-spacing(3);
			height: fit-content;
			padding: var(--padding-extra-small) var(--padding-slim);
			text-align: center;
			border-radius: var(--radius-medium);

			@include font.get-typography(body-small-medium);

			@include break.max-mobile {
				width: brandui-col-spacing(12);
			}
		}

		&-content {
			max-width: 100%;
			width: brandui-col-spacing(9);

			@include break.max-mobile {
				width: brandui-col-spacing(12);
			}
		}

		@include break.max-mobile {
			flex-direction: column;
			gap: var(--padding-small);
		}
	}
}