@import 'tao/ui/globals';

.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 300ms;
}

&[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 300ms, opacity 300ms;
  opacity: 0;

  .tao-dialog-content {
    padding: 1rem 2rem;

    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;

    .tao-dialog-content {
      padding: 0;
    }
  }
}

&[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;
}

}