$fade-in-time: .65s;
$fade-out-time: .65s;

.inspect-element-animation .modal {
  position: fixed;
  transition: width $fade-in-time;

  &--enter--active, &--leave, &--visible {
    width: 100% !important;
  }

  &--content {
    position: relative;
    margin: 0 auto;

    will-change: margin;
  }

  &--enter .modal--overlay {
    background-color: rgba(0, 0, 0, 0);
  }

  &--enter--active .modal--overlay {
    background-color: rgba(0, 0, 0, 0.8);
    transition: background-color ($fade-in-time - 0.1s) ease;
  }

  &--leave .modal--overlay {
    background-color: rgba(0, 0, 0, 0.8);
  }

  &--leave--active .modal--overlay {
    background-color: rgba(0, 0, 0, 0);
    transition: background-color ($fade-out-time - 0.1s) ease;
  }

  &--overlay {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    will-change: background-color;

    background-color: rgba(0, 0, 0, 0.8);
  }
}
$fade-in-time: .65s;
$fade-out-time: .65s;

.inspect-element-animation .modal {
  position: fixed;
  transition: width $fade-in-time;

  &--enter--active, &--leave, &--visible {
    width: 100% !important;
  }

  &--content {
    position: relative;
    margin: 0 auto;

    transition: width $fade-in-time;

    will-change: margin, width;
  }

  &--enter .modal--overlay {
    background-color: rgba(0, 0, 0, 0);
  }

  &--enter--active .modal--overlay {
    background-color: rgba(0, 0, 0, 0.8);
    transition: background-color ($fade-in-time - 0.1s) ease;
  }

  &--leave .modal--overlay {
    background-color: rgba(0, 0, 0, 0.8);
  }

  &--leave--active .modal--overlay {
    background-color: rgba(0, 0, 0, 0);
    transition: background-color ($fade-out-time - 0.1s) ease;
  }

  &--overlay {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    will-change: background-color;

    background-color: rgba(0, 0, 0, 0.8);
  }
}
Allow animation of the content-width
Allow animation of the content-width
