.modal {
  // Need this to make sure tool tips do not cover models
  // Do not change this, it will break external usage.
  z-index: 100000;

  @media only screen and (max-width: $tablet) {
    padding: 0 $size-8;
  }

  @media only screen and (max-width: $mobile) {
    .modal-card-foot {
      .ob-button {
        min-width: unset;
      }
    }
  }
}

.modal-background-faded {
  @extend .modal-background;
  opacity: 0.5;
  // we want this to be black black not what bulma might consider to be black
  background-color: #000000;
}

.modal-card {
  box-shadow: $elevation-3;
  border-radius: $radius-small;
  outline: none;
}

.modal-card-foot {
  padding: 0 20px 20px;
  justify-content: flex-end;
}