@import 'tao/ui/globals';

body.tao-dialog-active {
  overflow: hidden;
}

.tao-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-dialog;
  display: none;
  overflow: hidden;

  &[modal] {
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 200ms;
  }

  &[modal][active] {
    background-color: rgba(0, 0, 0, 0.55);
  }

  &[active] .tao-dialog-wrapper {
    transform: translate(0, 0);
    opacity: 1;
  }

  .tao-dialog-wrapper {
    position: relative;
    width: 37.5rem;
    min-height: 1em;
    margin: 0 auto;
    border-radius: 0 0 $border-radius-s $border-radius-s;
    background-color: $white-color;
    box-shadow: 0 0 4px 4px rgba(0,0,0,0.1);
    transform: translate(0, -30%);
    transition: transform .3s, opacity .3s, width .2s;
    opacity: 0;
    padding: 1rem 2rem;

    .tao-dialog-content {
      h3:first-child,
      .title:first-child {
        margin-bottom: 2rem;
      }
    }

    .tao-dialog-buttons,
    .tao-dialog-content .buttons,
    .tao-dialog-content .form-buttons {
      margin-left: 0;
      margin-bottom: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;

      .button, a {
        margin: 0 0.75rem;
      }
    }

    .tao-dialog-buttons {
      margin: 1.5rem 0 0 0;
    }
  }

  &.tao-confirm-dialog,
  &.tao-message-dialog {
    .tao-dialog-wrapper {
      width: 32.5rem;
      padding: 1.5rem 2rem;
    }
  }

  &[size='l'] .tao-dialog-wrapper {
    width: 53.75rem;
  }

  &[size='xl'] .tao-dialog-wrapper {
    width: 71.25rem;
  }

  .tao-dialog-wrapper > .link-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    text-decoration: none;
    fill: $lighter-grey-color;

    &:hover {
      fill: $grey-color;
    }

    .icon {
      width: 1.25rem;
      height: 1.25rem;
    }
  }

  &[with-close-button] .tao-dialog-wrapper > .link-close {
    display: flex;
  }

}