.lbaic-settings-tutorial {
  &-layout {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 16px;
    z-index: 1000002;
    pointer-events: none;
  }

  & {

  }

  &-highlight {
    --lbaic-settings-tutorial-gap-x: 7px;
    --lbaic-settings-tutorial-gap-y: 6px;

    --lbaic-settings-tutorial-start-x: calc(var(--lbaic-settings-tutorial-left) - var(--lbaic-settings-tutorial-gap-x));
    --lbaic-settings-tutorial-start-y: calc(var(--lbaic-settings-tutorial-top) - var(--lbaic-settings-tutorial-gap-y));
    --lbaic-settings-tutorial-end-x: calc(var(--lbaic-settings-tutorial-left) + var(--lbaic-settings-tutorial-width) + var(--lbaic-settings-tutorial-gap-x));
    --lbaic-settings-tutorial-end-y: calc(var(--lbaic-settings-tutorial-top) + var(--lbaic-settings-tutorial-height) + var(--lbaic-settings-tutorial-gap-y));

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 6px;
    background-color: rgba(var(--lbaic-settings-black-rgb), 0.4);
    clip-path: polygon(
                    0% 0%,
                    0% 100%,
                    var(--lbaic-settings-tutorial-start-x) 100%,
                    var(--lbaic-settings-tutorial-start-x) var(--lbaic-settings-tutorial-start-y),
                    var(--lbaic-settings-tutorial-end-x) var(--lbaic-settings-tutorial-start-y),
                    var(--lbaic-settings-tutorial-end-x) var(--lbaic-settings-tutorial-end-y),
                    var(--lbaic-settings-tutorial-start-x) var(--lbaic-settings-tutorial-end-y),
                    var(--lbaic-settings-tutorial-start-x) 100%,
                    100% 100%,
                    100% 0%
    );
    transition: clip-path 180ms ease-in-out;
    pointer-events: all;
  }

  &-nav {
    position: absolute;
    top: 64px;
    right: 32px;
    display: grid;
    grid-auto-columns: auto;
    grid-auto-flow: column;
    gap: 20px;
    pointer-events: all;
    z-index: 1;
  }

  &-pagination {
    position: absolute;
    right: 32px;
    bottom: 26px;
    display: grid;
    grid-auto-columns: auto;
    grid-auto-flow: column;
    align-items: center;
    gap: 4px;
    pointer-events: all;
    z-index: 1;

    &-in {
      position: relative;
      min-width: 26px;
      height: 24px;
      display: flex;
      align-items: center;
      padding: 5px 6px;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 20px;
        background-color: rgba(var(--lbaic-settings-white-rgb), 0.2);
        opacity: var(--lbaic-settings-tutorial-pagination-item-bg-opacity, 0);
        transition: opacity 180ms ease-in-out;
        z-index: -1;
      }

      &.active {
        --lbaic-settings-tutorial-pagination-item-bg-opacity: 1;
        --lbaic-settings-tutorial-pagination-item-circle-bg: var(--lbaic-settings-white);
        --lbaic-settings-tutorial-pagination-item-label-width: max-content;
      }

      &.done {
        --lbaic-settings-tutorial-pagination-item-circle-bg: var(--lbaic-settings-notification-success);
        --lbaic-settings-tutorial-pagination-item-circle-border: 0;
        --lbaic-settings-tutorial-pagination-item-check-opacity: 1;
      }
    }

    &-circle {
      width: 14px;
      height: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--lbaic-settings-tutorial-pagination-item-circle-bg, transparent);
      border-radius: 50%;
      border: var(--lbaic-settings-tutorial-pagination-item-circle-border, 2px) solid var(--lbaic-settings-white);
      transition: background-color 180ms ease-in-out, border-width 180ms ease-in-out;

      &-i {
        width: 100%;
        height: 100%;
        display: block;
        fill: var(--lbaic-settings-white);
        opacity: var(--lbaic-settings-tutorial-pagination-item-check-opacity, 0);
        transition: opacity 180ms ease-in-out;
      }
    }

    &-label {
      max-width: var(--lbaic-settings-tutorial-pagination-item-label-width, 0);
      font-size: var(--lbaic-settings-fs-14);
      font-weight: var(--lbaic-settings-fw-500);
      color: var(--lbaic-settings-white);
      line-height: var(--lbaic-settings-lh-16);
      text-indent: 5px;
      overflow: hidden;
    }
  }
}