@use '../variables' as *;

.#{$prefix}drawer {
	position: absolute;
	max-width: var(--#{$prefix}drawer-width);
	width: 100%;
	height: 100%;
	background-color: var(--#{$prefix}drawer-background);
	display: flex;
	flex-direction: column;
	border-width: 0px;
	border-style: solid;
	border-color: var(--#{$prefix}drawer-border-color);

	& > form {
		width: inherit;
		max-width: inherit;
		height: inherit;
		max-height: inherit;
		display: inherit;
		flex-direction: inherit;
		align-items: inherit;
		justify-content: inherit;
	}

	&-header {
		position: relative;
		flex-shrink: 0;
		height: var(--#{$prefix}drawer-header-height);
		min-height: var(--#{$prefix}drawer-header-min-height);
		padding-block: var(--#{$prefix}drawer-header-padding-y);
		padding-inline: var(--#{$prefix}drawer-header-padding-x);
		display: flex;
		align-items: center;
		gap: var(--#{$prefix}drawer-header-gap);

		&__start-content,
		&__end-content {
			flex-shrink: 0;
			display: flex;
			align-items: center;
		}

		&__content {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			gap: var(--#{$prefix}drawer-header-content-gap);
		}

		&__title {
			font-size: var(--#{$prefix}drawer-header-title-font-size);
			font-weight: var(--#{$prefix}drawer-header-title-font-weight);
			line-height: var(--#{$prefix}drawer-header-title-line-height);
			overflow: hidden;
			color: var(--#{$prefix}drawer-header-title-color);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}

		&__subtitle {
			font-size: var(--#{$prefix}drawer-header-subtitle-font-size);
			font-weight: var(--#{$prefix}drawer-header-subtitle-font-weight);
			line-height: var(--#{$prefix}drawer-header-subtitle-line-height);
			overflow: hidden;
			color: var(--#{$prefix}drawer-header-subtitle-color);
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
	}

	&-header:not(&-header--bordered) ~ &-body:not([data-hidden='true']),
	&-header:not(&-header--bordered) ~ :not([hidden]) &-body:not([data-hidden='true']) {
		padding-top: 0;
	}

	&-header--bordered ~ &-body:not([data-hidden='true']),
	&-header--bordered ~ :not([hidden]) &-body:not([data-hidden='true']) {
		border-top-width: 1px;
	}

	&-body {
		flex-grow: 1;
		border-top: 0px solid #ddd;
		padding-block: var(--#{$prefix}drawer-body-padding-y);
		padding-inline: var(--#{$prefix}drawer-body-padding-x);
		font-size: var(--#{$prefix}drawer-body-font-size);
		line-height: var(--#{$prefix}drawer-body-line-height);
		color: var(--#{$prefix}drawer-body-color);
	}

	&-footer {
		flex-shrink: 0;
		position: relative;
		min-height: var(--#{$prefix}drawer-footer-min-height);
		padding-block: var(--#{$prefix}drawer-footer-padding-y);
		padding-inline: var(--#{$prefix}drawer-footer-padding-x);
		border-top-width: 0px;
		border-top-style: solid;
		border-top-color: var(--#{$prefix}drawer-footer-border-color);
		background-color: var(--#{$prefix}drawer-footer-background);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 0.5rem;
	}

	&-body:not([data-hidden='true']) ~ &-footer:not(&-footer--bordered) {
		padding-top: 0;
	}

	&-footer--bordered {
		border-top-width: 1px;
	}

	&-appear,
	&-enter {
		opacity: 0;
		transform: translateX(-100%);
	}

	&-appear-active,
	&-enter-active {
		opacity: 1;
		transform: translateX(0%);
		transition:
			opacity 100ms,
			transform 200ms;
		transition-delay: 300ms;
	}

	&-exit {
		opacity: 1;
		transform: translateX(0%);
	}

	&-exit-active {
		opacity: 0;
		transform: translateX(-100%);
		transition:
			opacity 300ms,
			transform 300ms;
	}

	&--left,
	&--right {
		max-width: var(--#{$prefix}drawer-xs-width);
		max-height: 100%;
	}

	&--left {
		left: 0;
		border-right-width: var(--#{$prefix}drawer-border-width);
	}

	&--left#{&}-appear,
	&--left#{&}-enter {
		transform: translateX(-100%);
	}

	&--left#{&}-appear-active,
	&--left#{&}-enter-active {
		transform: translateX(0%);
	}

	&--left#{&}-exit {
		transform: translateX(0%);
	}

	&--left#{&}-exit-active {
		transform: translateX(-100%);
	}

	&--right#{&}-appear,
	&--right#{&}-enter {
		transform: translateX(100%);
	}

	&--right {
		right: 0;
		border-left-width: var(--#{$prefix}drawer-border-width);
	}

	&--right#{&}-appear-active,
	&--right#{&}-enter-active {
		transform: translateX(0%);
	}

	&--right#{&}-exit {
		transform: translateX(0%);
	}

	&--right#{&}-exit-active {
		transform: translateX(100%);
	}

	&--top,
	&--bottom {
		max-width: 100%;
		max-height: var(--#{$prefix}drawer-xs-width);
	}

	&--top {
		top: 0;
		border-bottom-width: var(--#{$prefix}drawer-border-width);
	}

	&--top#{&}-appear,
	&--top#{&}-enter {
		transform: translateY(-100%);
	}

	&--top#{&}-appear-active,
	&--top#{&}-enter-active {
		transform: translateY(0%);
	}

	&--top#{&}-exit {
		transform: translateY(0%);
	}

	&--top#{&}-exit-active {
		transform: translateY(-100%);
	}

	&--bottom {
		bottom: 0;
		border-top-width: var(--#{$prefix}drawer-border-width);
	}

	&--bottom#{&}-appear,
	&--bottom#{&}-enter {
		transform: translateY(100%);
	}

	&--bottom#{&}-appear-active,
	&--bottom#{&}-enter-active {
		transform: translateY(0%);
	}

	&--bottom#{&}-exit {
		transform: translateY(0%);
	}

	&--bottom#{&}-exit-active {
		transform: translateY(100%);
	}

	@media screen and (min-width: 480px) {
		&--left,
		&--right {
			max-width: var(--#{$prefix}drawer-width);
			max-height: 100%;
		}

		&--top,
		&--bottom {
			max-width: 100%;
			max-height: var(--#{$prefix}drawer-width);
		}
	}
}