@use "../../mixins";

.newspack-ui {
	.newspack-ui {
		&__dropdown {
			display: inline-flex;
			position: relative;
			&__toggle {
				margin: 0;
			}
			&__content {
				background: var(--newspack-ui-color-body-bg);
				border: 1px solid var(--newspack-ui-color-border);
				border-radius: var(--newspack-ui-border-radius-m);
				font-size: var(--newspack-ui-font-size-xs);
				opacity: 0;
				position: absolute;
				left: 0;
				min-width: 160px;
				padding: var(--newspack-ui-spacer-base) 0;
				pointer-events: none;
				top: calc(100% + var(--newspack-ui-spacer-base));
				transform: scaleY(0);
				transition: opacity 125ms ease-in-out;
				z-index: 1;
				@include mixins.newspack-ui-elevation( 1 );
				ul {
					list-style: none;
					margin: 0;
					padding: 0;
					li {
						margin: 0;
						padding: 0;
						.newspack-ui__button {
							border-radius: 0;
							display: flex;
							font-size: var(--newspack-ui-font-size-xs);
							justify-content: start;
							line-height: var(--newspack-ui-line-height-xs);
							min-height: var(--newspack-ui-spacer-7);
							padding: var(--newspack-ui-spacer-2) var(--newspack-ui-spacer-5);
							white-space: nowrap;
							width: 100%;
							&.cancel,
							&.delete,
							&.wcs_deletion_error,
							&--destructive {
								color: var(--newspack-ui-color-error-50);
							}

							&:focus-visible {
								outline-offset: -1px;
							}
						}
					}
				}
			}
			&.active {
				.newspack-ui__dropdown__content {
					pointer-events: auto;
					opacity: 1;
					transform: scaleY(1);
				}
			}
		}
	}
}
