.modal
{
  text-align: center;
  padding: 2rem;

  > .icon
  {
    width: 4em;
    height: 4em;
    padding: 0;
    margin: 1rem auto 0;
    background: $gray-dark;
    border-radius: 100%;
    border: 3px solid white;

    // &::before
    // {
    //   content: '';
    //   display: block;
    //   width: 100%;
    //   height: 15rem;
    //   background: $gray-light;
    //   position: absolute;
    //   right: 0;
    //   top: 0;
    //   z-index: -1;
    // }

    svg
    {
      width: 100%;
      padding: 0.5em;

      path
      {
        fill: white;
      }
    }
  }


  &.red
  {
    > .icon
    {
      background: $red-dark;

      // &::before
      // {
      //   background: $red-light;
      // }
    }
  }

  &.blue
  {
    > .icon
    {
      background: $blue-dark;

      // &::before
      // {
      //   background: $blue-light;
      // }
    }
  }

  &.yellow
  {
    > .icon
    {
      background: $yellow-dark;

      // &::before
      // {
      //   background: $yellow-light;
      // }
    }
  }

  &.green
  {
    > .icon
    {
      background: $green-dark;

      // &::before
      // {
      //   background: $green-light;
      // }
    }
  }

  > .title
  {
    font-size: 24px;
    margin: 20px 0 30px 0;
    font-weight: 600%;
    line-height: 120%;
    color: $black;
  }

  &.error .title
  {
    color: $red;
  }

  .caption
  {
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
  }

  .buttons
  {
    display: flex;
  }

  button,
  .button
  {
    &:not([class*=" w-"])
    {
      width: 50%;
    }

    margin: 4rem auto 0em auto;
    //
    // @include respond-to(mobile)
    // {
    //   &:last-child
    //   {
    //     margin-top: 0rem
    //   }
    //   &:first-child
    //   {
    //     margin-top: 3rem
    //   }
    // }
  }
}