$focus-bg: $body-bg !default;
$focus-padding: 25px 55px !default;

@import "@css/components/focus/focus-close";

.focus-content {
   background-color: $focus-bg;
   margin: auto;
   max-width: 100%;
   padding: $focus-padding;
   pointer-events: auto; // reset .focus-dialog pointer evenets none
   width: 540px;

   @media screen and (max-width: $sm - 1) {
      padding-left: 20px;
      padding-right: 20px;
   }

   @media screen and (max-width: $xs - 1) {
      .g-recaptcha {
         transform: scale(.85);
         transform-origin: left;
      }
   }

   @media screen and (max-width: 374px) {
      .g-recaptcha {
         transform: scale(.75);
      }
   }
}

.focus-header {
   border-bottom: 1px solid $border-color;
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 25px;
   padding-bottom: 12px;
   position: relative;

   .title {
      @include focus-header-title;
   }
}

.focus-footer {
   border-top: 1px solid $border-color;
   margin-top: 30px;
   padding-top: 20px;
   text-align: center;

   p {
      margin-bottom: 0;
   }

   a {
      color: $text-dark;
   }
}
