:host {
  display: inline-block; --background: #fff; --border-color: #d1d1d1; --border-radius: 0px; --text-color: #333; --text-white-space: nowrap; --text-padding: 15px 20px; --text-font-size: 14px; --text-line-height: 160%; --text-triangle-width: 6px; --z-index: 1000
}
.container {
  display: block !important; width: 100%; height: 100%; position: relative; z-index: var(--z-index)
}
.container div.mask {
  width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 100
}
.container div.text {
  position: absolute; z-index: 200; display: none; opacity: 0; transition: all .3s ease
}
.container div.text::before {
  content: ''; width: 0px; height: 0px; position: absolute; z-index: 100
}
.container div.text div.content {
  background: var(--background); border: var(--border-color) 1px solid; overflow: hidden; border-radius: var(--border-radius); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1)
}
.container div.text div.tips {
  color: var(--text-color); white-space: var(--text-white-space); padding: var(--text-padding); font-weight: bold; font-size: var(--text-font-size); line-height: var(--text-line-height); text-align: center
}
.container div.text div.button {
  width: 100%; display: flex; align-items: center
}
.container div.text div.button button {
  display: block; width: 50%; border: 0px; outline: none; padding: 6px; text-align: center; font-size: calc(var(--text-font-size) - 2px); cursor: pointer; border-radius: 0px; transition: all .1s ease
}
.container div.text div.button button.yes {
  background-color: #e7505a; color: #fff
}
.container div.text div.button button.yes:hover {
  background-color: #e12330
}
.container div.text div.button button.yes:focus {
  background-color: #94000a
}
.container div.text div.button button.no {
  background-color: #e1e5ec
}
.container div.text div.button button.no:hover {
  background-color: #c2cad8
}
.container div.text div.button button.no:focus {
  background-color: #9499a1
}
.container div.text.on {
  display: block
}
.container div.text.on.show {
  opacity: 1
}
.container div.text[position='top'] {
  bottom: calc(100% + var(--text-triangle-width)); left: 50%; transform: translate(-50%, 0)
}
.container div.text[position='top']::before {
  bottom: calc(0px - 2 * var(--text-triangle-width)); left: 50%; transform: translate(-50%, 0); border: var(--text-triangle-width) solid transparent; border-top-color: var(--border-color)
}
.container div.text[position='top'].show {
  bottom: calc(100% + 2 * var(--text-triangle-width))
}
.container div.text[position='top-start'] {
  bottom: calc(100% + var(--text-triangle-width)); left: 0px
}
.container div.text[position='top-start']::before {
  bottom: calc(0px - 2 * var(--text-triangle-width)); left: calc(2 * var(--text-triangle-width)); border: var(--text-triangle-width) solid transparent; border-top-color: var(--border-color)
}
.container div.text[position='top-start'].show {
  bottom: calc(100% + 2 * var(--text-triangle-width))
}
.container div.text[position='top-end'] {
  bottom: calc(100% + var(--text-triangle-width)); right: 0px
}
.container div.text[position='top-end']::before {
  bottom: calc(0px - 2 * var(--text-triangle-width)); right: calc(2 * var(--text-triangle-width)); border: var(--text-triangle-width) solid transparent; border-top-color: var(--border-color)
}
.container div.text[position='top-end'].show {
  bottom: calc(100% + 2 * var(--text-triangle-width))
}
.container div.text[position='top'] div.content,
.container div.text[position='top-start'] div.content,
.container div.text[position='top-end'] div.content {
  box-shadow: -3px -3px 3px rgba(0, 0, 0, 0.1)
}
.container div.text[position='right'] {
  left: calc(100% + var(--text-triangle-width)); top: 50%; transform: translate(0, -50%)
}
.container div.text[position='right']::before {
  left: calc(0px - 2 * var(--text-triangle-width)); top: 50%; transform: translate(0, -50%); border: var(--text-triangle-width) solid transparent; border-right-color: var(--border-color)
}
.container div.text[position='right'].show {
  left: calc(100% + 2 * var(--text-triangle-width))
}
.container div.text[position='right-start'] {
  left: calc(100% + var(--text-triangle-width)); top: 0px
}
.container div.text[position='right-start']::before {
  left: calc(0px - 2 * var(--text-triangle-width)); top: calc(2 * var(--text-triangle-width)); border: var(--text-triangle-width) solid transparent; border-right-color: var(--border-color)
}
.container div.text[position='right-start'].show {
  left: calc(100% + 2 * var(--text-triangle-width))
}
.container div.text[position='right-end'] {
  left: calc(100% + var(--text-triangle-width)); bottom: 0px
}
.container div.text[position='right-end']::before {
  left: calc(0px - 2 * var(--text-triangle-width)); bottom: calc(2 * var(--text-triangle-width)); border: var(--text-triangle-width) solid transparent; border-right-color: var(--border-color)
}
.container div.text[position='right-end'].show {
  left: calc(100% + 2 * var(--text-triangle-width))
}
.container div.text[position='bottom'] {
  top: calc(100% + var(--text-triangle-width)); left: 50%; transform: translate(-50%, 0)
}
.container div.text[position='bottom']::before {
  top: calc(0px - 2 * var(--text-triangle-width)); left: 50%; transform: translate(-50%, 0); border: var(--text-triangle-width) solid transparent; border-bottom-color: var(--border-color)
}
.container div.text[position='bottom'].show {
  top: calc(100% + 2 * var(--text-triangle-width))
}
.container div.text[position='bottom-start'] {
  top: calc(100% + var(--text-triangle-width)); left: 0px
}
.container div.text[position='bottom-start']::before {
  top: calc(0px - 2 * var(--text-triangle-width)); left: calc(2 * var(--text-triangle-width)); border: var(--text-triangle-width) solid transparent; border-bottom-color: var(--border-color)
}
.container div.text[position='bottom-start'].show {
  top: calc(100% + 2 * var(--text-triangle-width))
}
.container div.text[position='bottom-end'] {
  top: calc(100% + var(--text-triangle-width)); right: 0px
}
.container div.text[position='bottom-end']::before {
  top: calc(0px - 2 * var(--text-triangle-width)); right: calc(2 * var(--text-triangle-width)); border: var(--text-triangle-width) solid transparent; border-bottom-color: var(--border-color)
}
.container div.text[position='bottom-end'].show {
  top: calc(100% + 2 * var(--text-triangle-width))
}
.container div.text[position='left'] {
  right: calc(100% + var(--text-triangle-width)); top: 50%; transform: translate(0, -50%)
}
.container div.text[position='left']::before {
  right: calc(0px - 2 * var(--text-triangle-width)); top: 50%; transform: translate(0, -50%); border: var(--text-triangle-width) solid transparent; border-left-color: var(--border-color)
}
.container div.text[position='left'].show {
  right: calc(100% + 2 * var(--text-triangle-width))
}
.container div.text[position='left-start'] {
  right: calc(100% + var(--text-triangle-width)); top: 0px
}
.container div.text[position='left-start']::before {
  right: calc(0px - 2 * var(--text-triangle-width)); top: calc(2 * var(--text-triangle-width)); border: var(--text-triangle-width) solid transparent; border-left-color: var(--border-color)
}
.container div.text[position='left-start'].show {
  right: calc(100% + 2 * var(--text-triangle-width))
}
.container div.text[position='left-end'] {
  right: calc(100% + var(--text-triangle-width)); bottom: 0px
}
.container div.text[position='left-end']::before {
  right: calc(0px - 2 * var(--text-triangle-width)); bottom: calc(2 * var(--text-triangle-width)); border: var(--text-triangle-width) solid transparent; border-left-color: var(--border-color)
}
.container div.text[position='left-end'].show {
  right: calc(100% + 2 * var(--text-triangle-width))
}
.container div.text[position='left'] div.content,
.container div.text[position='left-start'] div.content,
.container div.text[position='left-end'] div.content {
  box-shadow: -3px -3px 3px rgba(0, 0, 0, 0.1)
}