.b3-dialog { position: fixed; top: 0; left: 0; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 100%; display: flex; z-index: 305; &--open { .b3-dialog__scrim { opacity: 1; } .b3-dialog__container { transform: none; opacity: 1; } } &__scrim { background-color: var(--b3-mask-background); position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 150ms linear; } &__container { border-radius: 4px; background-color: var(--b3-theme-surface); position: relative; box-shadow: var(--b3-dialog-shadow); display: flex; flex-direction: column; flex-grow: 0; flex-shrink: 0; box-sizing: border-box; max-width: 100%; transform: scale(.8); opacity: 0; transition: opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1); } &__header { padding: 16px 24px; line-height: 24px; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--b3-theme-surface-lighter); } &__content { padding: 16px 24px; word-break: break-all; } &__action { padding: 8px 24px; border-top: 1px solid var(--b3-theme-surface-lighter); display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; box-sizing: border-box; user-select: none; } &__close { position: absolute; cursor: pointer; top: 10px; right: -32px; height: 16px; width: 16px; } &--switch { max-height: 70vh; max-width: 520px; .b3-list:last-child { border-left: 1px solid var(--b3-theme-surface-lighter); overflow: auto; max-width: 360px; min-width: 200px; } .dialog__path { padding: 4px 8px; border-top: 1px solid var(--b3-theme-surface-lighter); color: var(--b3-theme-on-surface); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 18px; min-height: 18px; } } }