@import './../common/abstracts/_mixin.scss';
@import './../common/abstracts/variable.scss';

.wot-theme-dark {
  @include b(tour) {
    @include e(popover) {
      background: $-dark-background2;
    }

    @include e(info) {
      background: $-dark-background2;
      border-color: $-dark-background2;
      color: $-dark-color;
    }

    @include e(skip) {
      color: $-dark-color;
    }

    @include e(highlight) {

      @include m(mask) {
        box-shadow: 0 0 0 100vh rgba(0, 0, 0, 0.7);
      }
    }

  }
}

@include b(tour) {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: $-tour-z-index;

  @include e(mask) {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  @include e(highlight) {
    position: fixed;
    background: transparent;
    box-sizing: content-box;
    animation: tour-show $-tour-animation-duration $-tour-highlight-animation-timing;
    top: 0;
    left: 0;
    width: 100vw;
    height: 0;
    border-radius: 0;
    padding: 0;

    @include m(mask) {
      box-shadow: 0 0 0 100vh $-tour-highlight-shadow-color;
    }
  }

  @include e(popover) {
    z-index: $-tour-popover-z-index;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    max-width: $-tour-popover-max-width;
    text-align: center;
    transition: $-tour-animation-duration all;
    background-color: $-tour-popover-bg;
    padding: $-tour-popover-padding;
    border-radius: $-tour-popover-radius;
    width: fit-content;
    min-width: $-tour-popover-min-width;
  }

  @include e(info) {
    font-size: $-tour-popover-info-font-size;
    background: $-tour-info-bg;
    border: $-tour-info-border-width solid $-tour-info-border-color;
    color: $-tour-info-text-color;
    width: fit-content;
    text-align: left;
  }

  @include e(buttons) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 6px;
    color: $-tour-button-text-color;
  }

  @include e(prev) {
    @include edeep(default) {
      font-size: $-tour-button-font-size;
      border-radius: $-tour-button-radius;
      padding: $-tour-button-padding;
      white-space: nowrap;
    }
  }

  @include e(next) {
    @include edeep(default) {
      font-size: $-tour-button-font-size;
      border-radius: $-tour-button-radius;
      padding: $-tour-button-padding;
      background: $-tour-primary-button-bg-color;
      color: $-tour-primary-button-text-color;
      white-space: nowrap;
    }
  }

  @include e(finish) {
    @include edeep(default) {
      font-size: $-tour-button-font-size;
      border-radius: $-tour-button-radius;
      padding: $-tour-button-padding;
      background: $-tour-primary-button-bg-color;
      color: $-tour-primary-button-text-color;
      white-space: nowrap;
    }
  }

  @include e(skip) {

    @include edeep(default) {
      font-size: $-tour-button-font-size;
      border-radius: $-tour-button-radius;
      padding: $-tour-button-padding;
      white-space: nowrap;
    }
  }
}

@keyframes tour-show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}