@import "./../../mixins/scss/mixins";

$sizes: (
	"x-large": 44px,
	"large": 36px,
	"medium": 24px,
	"small": 16px,
	"x-small": 8px
);

f-spacer {
	@include base();
	display: flex;
	flex: 0 0 auto;
	@each $size, $value in $sizes {
		&[size="#{$size}"] {
			height: $value;
			width: 100%;
		}
	}
	&[size="fill-container"] {
		width: 100%;
		max-height: 100%;
	}
}

f-div {
	&[direction="row"] {
		> f-spacer {
			@each $size, $value in $sizes {
				&[size="#{$size}"] {
					width: $value;
					height: 100%;
				}
			}
			&[size="fill-container"] {
				max-width: 100%;
				height: 100%;
				flex: 1 0 auto;
				width: auto;
			}
		}
	}
	&[direction="column"] {
		> f-spacer {
			@each $size, $value in $sizes {
				&[size="#{$size}"] {
					height: $value;
					width: 100%;
				}
			}
			&[size="fill-container"] {
				width: 100%;
				max-height: 100%;
				flex: 1 0 auto;
			}
		}
	}
}