@use 'sass:color';
@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$tour: () !default;
$tour: map.merge(
  (
    min-width: 360px,
    max-width: 520px,
    title-font-size: value('font-size-primary'),
    title-weight: 500,
    title-color: value('content-color-primary'),
    header-v-padding: 8px,
    header-h-padding: 14px,
    body-v-padding: 4px,
    body-h-padding: 14px,
    footer-v-padding: 10px,
    footer-h-padding: 14px,
    close-color: value('content-color-placeholder'),
    close-color-hover: value('content-color-base'),
    dot-size: 6px,
    dot-bg: value('fill-color-secondary'),
    dot-bg-active: value('color-primary-base'),
    dot-span: 6px,
    bar-width: 12px,
    bar-height: 4px,
    bar-width-active: 20px,
    bar-bg: value('fill-color-secondary'),
    bar-bg-active: value('color-primary-base'),
    bar-span: 3px
  ),
  $tour
);

.#{$namespace}-tour {
  &-vars {
    @include define-preset-values('tour', $tour);
  }

  @include basis;

  &--permeable {
    pointer-events: none;
  }

  &__reference {
    position: absolute;
    pointer-events: none;
  }

  &__bubble {
    position: absolute;
    pointer-events: auto;

    &--center {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .#{$namespace}-bubble__arrow {
        display: none;
      }
    }

    &--typed {
      @include define-preset-style(
        'tour',
        (
          title-color: 'color-white'
        )
      );

      @include define-preset-values(
        'tour',
        (
          close-color: rgba($color-white, 0.6),
          close-color-hover: rgba($color-white, 0.9),
          dot-bg: rgba($color-white, 0.2),
          dot-bg-active: rgba($color-white, 0.8),
          bar-bg: rgba($color-white, 0.2),
          bar-bg-active: rgba($color-white, 0.8)
        )
      );
    }

    .#{$namespace}-bubble__content {
      word-break: normal;
    }
  }

  &__step {
    min-width: value('tour-min-width');
    max-width: value('tour-max-width');
    padding: 4px 0;
  }

  &__header {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: value('tour-header-v-padding') value('tour-header-h-padding');
  }

  &__title {
    flex: 1 0 0;
    font-size: value('tour-title-font-size');
    font-weight: value('tour-title-weight');
    color: value('tour-title-color');
  }

  &__close {
    display: flex;
    align-items: center;
    height: 24px;
    padding: 0;
    margin-inline-start: 6px;
    color: value('tour-close-color');
    cursor: pointer;
    background-color: transparent;
    border: 0;
    outline: 0;
    transition: value('transition-color');

    &:hover,
    &:focus {
      color: value('tour-close-color-hover');
    }
  }

  &__content {
    position: relative;
    flex: auto;
    min-width: 0;
    min-height: 0;
    padding: value('tour-body-v-padding') value('tour-body-h-padding');
  }

  &__footer {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: value('tour-footer-v-padding') value('tour-footer-h-padding');
  }

  &__sign {
    display: inline-flex;
    align-items: center;

    &--count {
      line-height: value('line-height-secondary');
    }
  }

  &__sign-dot {
    width: value('tour-dot-size');
    height: value('tour-dot-size');
    margin-inline-end: value('tour-dot-span');
    background-color: value('tour-dot-bg');
    border-radius: 50%;

    &--active {
      background-color: value('tour-dot-bg-active');
    }
  }

  &__sign-bar {
    width: value('tour-bar-width');
    height: value('tour-bar-height');
    margin-inline-end: value('tour-bar-span');
    background-color: value('tour-bar-bg');
    border-radius: value('tour-bar-height');

    &--active {
      width: value('tour-bar-width-active');
      background-color: value('tour-dot-bg-active');
    }
  }

  &__count-sep {
    margin: 0 2px;
  }

  &__action {
    line-height: value('line-height-secondary');
  }

  @each $type in $types {
    @at-root {
      &__bubble--#{$type} &__action {
        color: value('color-#{$type}-base');
        border-color: $color-white;

        &:hover {
          background-color: color.mix($color-white, $color-black, 93%);
        }

        &::after {
          display: none;
        }

        &.#{$namespace}-button--text {
          color: $color-white;
          border-color: transparent;
        }
      }
    }
  }

  &__bubble--typed &__action {
    background-color: $color-white;

    &.#{$namespace}-button--text {
      background-color: transparent;

      &:hover {
        background-color: rgba($color-white, 0.2);
      }
    }
  }

  &__hollow--active {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    transition: all value('transition-base');
  }
}