// Focus - modalni dialog
@import "@css[common]/components/focus/_focus-base";
@import "@css[common]/components/focus/_focus-delivery-widgets";

@media screen and (min-width: 992px) {
   .focus-opened.focus-transition > * {
      transition: all .5s;
   }

   .focus-closed > * {
      transition: all .5s;

      // fixes autocomplete z-index bug on automotovelo and others
      // opening AC after focus close resets its z-index
      &.pos-rel {
         filter: none;
      }
   }

   .focus {
      transition: all .5s;
   }
}

.focus {
   background: rgba(65, 72, 86, .5);
   opacity: 0;
   overflow: auto;
   padding: 10px;
   position: fixed;
   right: 0;
   top: 0;
   visibility: hidden;
   width: 100%;
   height: 100%;
   z-index: 300;

   &.active {
      opacity: 1;
      visibility: visible;
   }

   .focus-dialog {
      width: 100%;
      pointer-events: auto;
      margin: 0;
   }

   .focus-content {
      background-color: $white;
      margin: 30px auto 0;
      max-width: 100%;
      position: relative;
      width: 750px;
   }

   .focus-close {
      background: $brand-primary;
      border: 2px solid $white;
      border-radius: 50%;
      color: $white;
      display: block;
      font-size: 20px;
      line-height: 35px;
      margin: 10px 10px;
      padding: 0;
      position: absolute;
      right: 15px;
      top: 15px;
      text-align: center;
      touch-action: manipulation;
      width: 39px;
      height: 39px;
      z-index: 10;

      span:not(.fc) {
         display: none;
      }

      .fc,
      .fa {
         line-height: inherit;
      }
   }

   @media screen and (min-width: 768px) {
      padding-top: 50px;
   }

   @media screen and (min-width: 992px) {
      padding-top: 100px;
   }

   @media screen and (min-width: 1200px) {
      padding-top: 150px;
   }
}
