@use './../mixins' as mix;

$padding-right-for-icon: 20px;
$line-height: 24px;

.gm-expandable {
	position: relative;
	height: $line-height;
	min-height: 0;
	padding-right: $padding-right-for-icon;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	transition: min-height .3s ease-in-out;

	&:hover {
		cursor: pointer;
	}

	$gm-expandable-selector: &;

	&--down {
		white-space: normal;
		transition: min-height .3s ease-in-out;

		#{$gm-expandable-selector}__icon {
			transform: rotate(180deg);
		}
	}

	&--hidden {
		visibility: hidden;
		height: auto;
		position: relative;
		white-space: normal;
	}

	&__icon {
		position: absolute;
		right: 0;
		top: 0.75em;
		transition: transform 300ms ease;

		&.mat-icon {
			@include mix.image-size(10px);
		}
	}
}