@use './mixins' as mix;

.mat-mdc-dialog-container {
  --mat-dialog-container-color: transparent;
  --mat-dialog-container-shape: 16px;
  --mat-dialog-container-elevation: 0px 16px 32px 0px #0000000D;
  --mat-dialog-supporting-text-line-height: 22px;
  --mat-dialog-subhead-color: var(--font-color);

  --mat-dialog-subhead-size: 18px;
  --mat-dialog-subhead-weight: 500;
  --mat-dialog-subhead-line-height: 20px;

  @include mix.tablet {
    --mat-dialog-subhead-size: 22px;
    --mat-dialog-subhead-line-height: 28px;
  }

  .mdc-dialog__surface {
    overflow: visible !important;
    @include mix.scrollbar();
  }
	&.mat-mdc-dialog-container {
		border-radius: 16px 16px 0 0;
		background: var(--background);
		color: var(--font-color);
		box-shadow: none;
		min-width: 320px;

		@include mix.tablet-low {
			border-radius: 16px;
		}
	}
}

.mat-mdc-dialog-content {
  --mat-dialog-supporting-text-color: var(--font-color);

  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  overflow: initial !important;

  .gm-dialog-close {
    @include mix.image-size(16px);
  }
}

.cdk-overlay-backdrop {
  &:has(+ .cdk-global-overlay-wrapper > .gm-menu-mobile-sheet) {
    bottom: 60px !important;
  }

  &:has(+ .cdk-global-overlay-wrapper > .gm-dialog-panel) {
    bottom: 0 !important;
  }

	@include mix.tablet-low {
		bottom: 0;
	}
}

.cdk-overlay-dark-backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.gm-dialog-close.gm-icon {
	cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;

  z-index: 10000;
}

.gm-dialog-content {
  max-height: none !important;
  overflow: visible !important;
  padding: var(--gm-dialog-content-padding, 20px 24px 20px 24px) !important;
}

.gm-dialog-panel {
	align-self: flex-end !important;
	transition: opacity .15s ease-in-out;
	@include mix.tablet-low {
		align-self: center !important;
	}

	h4, h5 {
		margin-left: 0;
		margin-right: 0;
	}

	&.gm-hidden-panel {
		opacity: 0;
		transition: none;
	}
}

.gm-modal {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
	.gm-icon.gm-dialog-close {
		@include mix.image-size(16px);
		position: absolute;
		right: 20px;
	}
	&__header {
		font-weight: 500;
		font-size: 18px;
		line-height: 26px;
		color: var(--font-color);
	}
	&__form {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	&__controls {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	&__actions {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
}