$popperPadding: 25px;


[data-tg-tour]{
  scroll-margin: 30px 0; // Over-written by JS -  use the autoScrollOffset option
}

.tg-backdrop {
  position: absolute;
  align-items: center;
  justify-content: center;
  display: none;
  z-index: 99;
  border-radius: 7px;
  box-shadow: rgba(33, 33, 33, 0.8) 0 0 1px 2px, rgba(33, 33, 33, .8) 0 0 0 1000vh; // Over-written by JS -  use the backdropColor option
  border: 1px solid rgba(193, 192, 232, 0.5); // helps for dark mode contrast
  top:50vh;
  left:50vw;
  width:0;
  height:0;
  &.tg-backdrop-animate{
    transition: all 300ms;
  }
}
.tg-dialog{
  border-radius: 12px;
  animation-delay: 100ms;
  //min-width: 280px;
  min-height: 120px;
  background: #fff;
  color: #252525;
  max-width: 340px; // // Over-written by JS -  use the dialogWidth option
  width: max-content;
  z-index: 9999;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  font-size: .9rem;
  .tg-dialog-header{
    display: flex;
    align-items: center;
    padding: $popperPadding $popperPadding 0 $popperPadding;
    .tg-dialog-title{
      font-size: 1rem;
      font-weight: 700;
      margin-right: auto;
      & + .tg-dialog-body{
        padding: ($popperPadding*0.75) $popperPadding ($popperPadding*0.75) $popperPadding;
      }
    }
    .tg-dialog-close-btn{
      width: 12px;
      height: 12px;
      margin-left: 10px;
      opacity: .4;
      cursor: pointer;
      white-space: nowrap;
      &:hover{
        opacity: 8;
      }
      &:focus{
        opacity: 1;
      }
    }
    .tg-dialog-spinner{
      display: none;
      opacity: .4;
      margin-top: -1px;
      -webkit-animation: tg-spin 1s linear infinite;
      -moz-animation: tg-spin 1s linear infinite;
      -o-animation: tg-spin 1s linear infinite;
      animation: tg-spin 1s linear infinite;
      @keyframes tg-spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(359deg);
        }
      }
    }
  }
  .tg-dialog-progress-bar{
    background: #f1f1f1;
    height: 5px;
    display: block;
    margin-top: ($popperPadding*0.75);
    position: relative;
    > .tg-bar{
      position: absolute;
      top: 0;
      left: 0;
      min-width: 4px;
      background: #414144;
      height: 100%;
      display: block;
      transition: all 300ms;
    }
  }
  .tg-dialog-body{
    padding: $popperPadding;
    font-weight: 400;
  }
  .tg-dialog-dots{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    margin-bottom: 10px;
    border-top: 1px solid #dedee7;
    border-bottom: 1px solid #dedee7;
    > span.tg-dot{
      display: inline-block;
      width: 9px;
      height: 9px;
      background: #c2c7ce;
      border-radius: 12px;
      margin: 0 4px;
      &.tg-dot-active{
        background: #5362d9;
      }
    }
  }
  .tg-dialog-footer{
    padding: $popperPadding*0.5 $popperPadding $popperPadding $popperPadding;
    display: flex;
    align-items: center;
    button.tg-dialog-btn {
      padding: 5px 10px;
      border: 1px solid #cbcfd5;
      color: #6f727e;
      border-radius: 4px;
      font-weight: 500;
      font-size: .82rem;
      white-space: nowrap;
      & + button {
        margin-left: auto;
      }

      &.disabled {
        pointer-events: none;
        opacity: .6;
      }

      &:hover {
        color: #464852;
        border: 1px solid #b5b7c2;
        outline: none;
        box-shadow: none;
      }

      &:focus {
        outline: none;
        box-shadow: none;
      }

      &:active {
        color: #4655cb;
        background: #f1f2ff;
        border: 1px solid #5362d9;
        outline: none;
        box-shadow: none;
      }
    }
    .tg-dialog-footer-sup {
      margin: 0 auto;
      padding: 0 10px;
      text-align: center;
      line-height: 1;
      .tg-step-progress{
        font-size: .78rem;
        font-weight: 700;
        margin: 0 auto;
        opacity: .4;
        letter-spacing: 1px;
        display: inline-block;
      }
      .tg-dialog-dots {
        padding: 0;
        margin: 0;
        border: none;
        > span.tg-dot{
          width: 8px;
          height: 8px;
          margin: 0 3px;
        }
        & + .tg-step-progress{
          margin-top: 10px;
          font-size: .68rem;
        }
      }
    }
  }
  .tg-arrow{
    position: absolute;
    background: #fff;
    width: 9px;
    height: 9px;
    border-radius: 1px;
    transform: rotate(45deg);
  }
  &.tg-dialog-fixed{
    transition: none;
    animation-delay: 0ms;
  }
  &.animate-position{
    transition: all 300ms;
  }

  &.tg-dialog-loading{
    .tg-dialog-header{
      .tg-dialog-title{
        opacity: .4;
      }
      .tg-dialog-close-btn{
        display: none;
      }
      .tg-dialog-spinner{
        display: inline-block;
      }
    }
    .tg-dialog-body{
      opacity: .4;
      pointer-events: none;
    }
    .tg-dialog-footer{
      pointer-events: none;
      opacity: .4;
    }
  }
}