@charset "utf-8";
@import "./var";

.#{$prefix}guide {
    min-width: $guide-width-min;
    max-width: $guide-width-max;
}

.#{$prefix}guide .#{$prefix}bubble__inner {
    padding: 0;
    background-color: $guide-default-color-bg;
}

.#{$prefix}guide .#{$prefix}bubble__inner::before,
.#{$prefix}guide .#{$prefix}bubble__inner::after {
    display: none;
}

.#{$prefix}guide.is-show-triangle-arrow .#{$prefix}bubble__inner::before,
.#{$prefix}guide.is-show-triangle-arrow .#{$prefix}bubble__inner::after {
    display: block;
}

.#{$prefix}guide.is-show-triangle-arrow.#{$prefix}bubble--bottom .#{$prefix}bubble__inner:after,
.#{$prefix}guide.is-show-triangle-arrow.#{$prefix}bubble--bottom .#{$prefix}bubble__inner:before {
  margin-top: 0;
}

.#{$prefix}guide.is-show-triangle-arrow.#{$prefix}bubble--left .#{$prefix}bubble__inner:after,
.#{$prefix}guide.is-show-triangle-arrow.#{$prefix}bubble--left .#{$prefix}bubble__inner:before {
  margin-right: 0;
}

.#{$prefix}guide.is-show-triangle-arrow.#{$prefix}bubble--top .#{$prefix}bubble__inner:after,
.#{$prefix}guide.is-show-triangle-arrow.#{$prefix}bubble--top .#{$prefix}bubble__inner:before {
  margin-bottom: 0;
}

.#{$prefix}guide.is-show-triangle-arrow.#{$prefix}bubble--right .#{$prefix}bubble__inner:after,
.#{$prefix}guide.is-show-triangle-arrow.#{$prefix}bubble--right .#{$prefix}bubble__inner:before {
  margin-left: 0;
}

.#{$prefix}guide__close-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 0;
    min-width: $gudie-close-icon-width;

    &:hover {
      background-color: transparent;
    }

    .#{$prefix}icon-close {
        background-image: url(../../assets/image/slice/svg/btn-dismiss-white.svg);
    }
}

.#{$prefix}guide__body {
    .#{$prefix}media {
        flex-direction: column;
    }

    .#{$prefix}media .#{$prefix}media__left {
        width: 100%;
        padding-right: 0;
        line-height: 0;
    }

    .#{$prefix}guide__image {
        width: 100%;
    }

    .#{$prefix}media .#{$prefix}media__body {
        width: 100%;
        padding: 20px 24px 24px;
    }
}

.#{$prefix}guide__messagetitle {
    font-size: $guide-font-size-l;
    font-weight: $guide-font-weight-bold;
    margin-bottom: 12px;
    color: $guide-font-color-title;
    line-height: $guide-line-height-default;
}

.#{$prefix}guide__messagetext {
    font-size: $guide-font-size;
    font-weight: $guide-font-weight;
    line-height: $guide-line-height;
    color: $guide-font-color-desc;
}

.#{$prefix}guide__footer {
    display: flex;
    justify-content: space-between;
    font-size: 0;
    background-color: transparent;
    padding: 0 24px 24px;
}

.#{$prefix}guide.#{$prefix}guide--start .#{$prefix}guide__footer {
    justify-content: flex-end;
}

.#{$prefix}guide__footer .#{$prefix}guide__dot {
    display: flex;
    align-items: center;

    .#{$prefix}guide__dot-item {
        border: 1px solid $guide-dot-primary-color;
        border-radius: 50%;
        box-sizing: border-box;
        display: inline-block;
        height: $guide-dot-height;
        vertical-align: middle;
        width: $guide-dot-width;

        &:not(:last-child) {
            margin-right: 8px
        };
    }

    .#{$prefix}guide__dot-item.is-active {
        background-color: $guide-dot-primary-color;
    }

}

.#{$prefix}guide__footer .#{$prefix}btn {
    margin-left: 5px;
    line-height: $guide-line-height-default;
    font-weight: $guide-font-weight-default;
    min-width: $guide-primary-btn-min-width;
}

.#{$prefix}guide__footer .#{$prefix}btn.#{$prefix}btn--text {
    min-width: $guide-text-btn-min-width;
}


.#{$prefix}guide__flashing-light {
    width: $flashing-light-width;
    height: $flashing-light-height;
    background-color: transparent;
    position: absolute;
    margin: 0 auto;
}

.#{$prefix}guide__flashing-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(.5);
    background-color: $flashing-light-bg;
    animation-name: flashwrap;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    z-index: 3;
}

.#{$prefix}guide__flashing-light-dot {
    width: $flashing-light-dot-width;
    height: $flashing-light-dot-height;
    display: inline-block;
    vertical-align: middle;
    background-color: $flashing-light-dot-bg;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0.5);
    animation-name: flashdot;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.#{$prefix}bubble--top .#{$prefix}guide__flashing-light {
    bottom: 100%;
    left: inherit;
    right: inherit;
    margin-bottom: -1px;
    margin-left: -20px;
}

.#{$prefix}bubble--right .#{$prefix}guide__flashing-light {
    top: inherit;
    bottom: inherit;
    left: 100%;
    margin-left: -1px;
    margin-top: -20px;
}

.#{$prefix}bubble--bottom .#{$prefix}guide__flashing-light {
    top: 100%;
    left: inherit;
    right: inherit;
    margin-top: -1px;
    margin-left: -20px;
}


.#{$prefix}bubble--left .#{$prefix}guide__flashing-light {
    top: inherit;
    bottom: inherit;
    right: 100%;
    margin-right: -1px;
    margin-top: -20px;
}

.#{$prefix}bubble--top.#{$prefix}bubble--end .#{$prefix}guide__flashing-light,
.#{$prefix}bubble--bottom.#{$prefix}bubble--end .#{$prefix}guide__flashing-light {
    margin-right: -20px;
}

.#{$prefix}bubble--right.#{$prefix}bubble--end .#{$prefix}guide__flashing-light,
.#{$prefix}bubble--left.#{$prefix}bubble--end .#{$prefix}guide__flashing-light {
    margin-bottom: -20px;
}

.#{$prefix}bubble--right.#{$prefix}bubble--start .#{$prefix}guide__flashing-light {
    margin-top: -25px;
}

@keyframes flashwrap{
  0%{
      transform: scale(0.5);
      opacity: 1;
  }

  33%{
      transform: scale(0.5);
      opacity: 1;
  }

  66%{
      transform: scale(1);
      opacity: 0;
  }

  100%{
      transform: scale(1);
      opacity: 0;
  }
}

@keyframes flashdot{
  0%{
      transform: translate(-50%, -50%) scale(0.1);
      opacity: 1;
  }

  33%{
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
  }

  66%{
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
  }

  100%{
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
  }
}