@use 'sass:map';
@use './mixins' as *;
@use 'vuetify/settings';

.v-resize-drawer {
	container-name: v-resize-drawer;
	container-type: inline-size;

	&--handle {
		&-container {
			align-items: center;
			cursor: grab;
			display: flex;
			justify-content: center;
			position: absolute;
			z-index: 1;

			&-icon {
				&-parent {
					&-end,
					&-right {
						left: initial;
						right: 0;
					}
				}

				&-center {
					&-end,
					&-right {
						transform: rotate(180deg);
					}
				}

				&-user-icon {
					transform: none;
				}

				&-fa {
					font-size: .7rem !important;
				}
			}

			&-parent {
				&-left,
				&-start,
				&-undefined {
					right: 0;
				}

				&-end,
				&-right {
					left: 0;
				}
			}

			&-position {
				&-top {
					top: 0;
				}

				&-center {
					top: 50%;
					transform: translateY(-50%);
				}

				&-bottom {
					bottom: 0;
				}

				&-border {
					cursor: col-resize;
					height: 100%;
					top: 0;
					width: 8px;
				}
			}
		}
	}

	&--bottom {
		transition: min-height 0.3s;

		.v-resize-drawer--handle-container {
			&-position {
				&-center {
					left: 50%;
					top: 0;
					transform: translateX(-50%);
				}

				&-border {
					cursor: row-resize;
					left: 0%;
					top: 0 !important;
					width: 100% !important;
				}
			}
		}
	}

	&--top {
		top: 0 !important;
		transition: min-height 0.3s;

		.v-resize-drawer--handle-container {
			&-position {
				&-center {
					bottom: 1px;
					left: 50%;
					top: unset;
					transform: translateX(-50%);
				}

				&-border {
					bottom: 0 !important;
					cursor: row-resize;
					left: 0%;
					top: unset;
					width: 100% !important;
				}
			}
		}
	}

	&--bottom,
	&--top {
		.v-navigation-drawer__content {
			flex: 1 1 auto;
			position: relative;
		}
	}
}


@container v-resize-drawer (width > #{map.get(settings.$grid-breakpoints, 'xs')}) and (max-width: #{map.get(settings.$grid-breakpoints, 'sm') - 0.02}) {
	.v-col {
		&-xs-12 {
			flex: 0 0 100% !important;
			flex-basis: 0;
			flex-grow: 1;
			max-width: 100% !important;
		}
	}
}

// Grid Columns //
@include make-grid-columns;

// Hidden & d-#{size}-#{display-value} Columns //
@include make-grid-columns-hidden;