@import '../../styles/common.scss';

$pop-up-vertical-arrow: 47.5%;
$pop-up-arrow-extrusion: -7px;
$pop-up-horizontal-arrow: 47%;

.container {
  @include boxSizing;

  // TODO input width?
  min-height: 50px;
  width: 280px;
  display: grid;
  grid: min-content 1fr / 1fr;

  background-color: white;

  box-shadow: 0px 1px 8px 3px rgba(92, 92, 92, 0.27);

  z-index: 10;

  .confirmBody {
    display: grid;
    grid: minmax(58px, auto) min-content / 1fr 1fr;
    row-gap: 5px;
    column-gap: 10px;

    padding: 5px;

    .confirmBodyText {
      grid-column: 1 / -1;

      padding: 5px;

      color: var(--confirm-dialog-body-text-color, $confirm-dialog-body-text-color);
      font-size: 14px;

      .defaultText {
        padding: 0;
        margin: 0;
        white-space: normal;
      }
    }

    .confirmButton {
      height: 40px;
    }
  }
  .arrow,
  .arrow::before {
    position: absolute;
    width: 14px;
    height: 14px;
    background: inherit;
  }

  .arrow {
    z-index: -1;
    visibility: hidden;

    background-color: white;
  }

  .arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
  }

  &[data-popper-placement^='top'] {
    > .arrow {
      bottom: $pop-up-arrow-extrusion;
      left: $pop-up-vertical-arrow;
    }
  }

  &[data-popper-placement^='bottom'] {
    > .arrow {
      top: $pop-up-arrow-extrusion;
      left: $pop-up-vertical-arrow;
    }
  }

  &[data-popper-placement^='left'] {
    > .arrow {
      top: $pop-up-horizontal-arrow;
      right: $pop-up-arrow-extrusion;
    }
  }

  &[data-popper-placement^='right'] {
    > .arrow {
      left: $pop-up-arrow-extrusion;
      top: $pop-up-horizontal-arrow;
    }
  }
}
