:host {
  position: absolute;
  display: none;
  height: 260px;
  width: 450px;
  border-radius: 3px;
  background-color: #4A4A4A;
  z-index: 1;
  padding: 50px 50px 20px 50px;
  color: #fff;
  font-weight: 300;
  box-shadow: 0 0 18px 0px #909090;

  &.show {
    display: block;
  }

  .tutorial-step-content {
    text-align: center;
    height: 145px;
    font-size: 16px;
    line-height: 20px;
  }

  .footer {
    text-align: right;

    .tutorial-step-counter {
      float: left;
      height: 45px;
      line-height: 45px;
      font-size: 16px;
      opacity: .6;
      font-weight: 300;
    }

    .tutorial-step-button {
      height: 45px;
      min-width: 110px;
      border: 1px solid #FFFFFF;
      background: #4a4a4a;
      border-radius: 22.5px;
      font-size: 16px;
      line-height: 43px;
      text-align: center;
      padding: 0 22px;
      margin-left: 6px;
    }
  }

  &::after {
    display: block;
    position: absolute;
    content: '';
  }

  &.bottom {
    bottom: -260px - (25px / 2);
    left: calc(50% - (450px / 2));

    &::after {
      border-style: solid;
      border-width: 0 28px 25px 28px;
      border-color: transparent transparent #4a4a44 transparent;
      top: -25px;
      left: (450px / 2) - 28px;
    }
  }

  &.top {
    top: -260px - (25px / 2);
    left: calc(50% - (450px / 2));

    &::after {
      border-style: solid;
      border-width: 25px 28px 0px 28px;
      border-color: #4a4a44 transparent transparent transparent;
      bottom: -25px;
      left: (450px / 2) - 28px;
    }
  }

  &.left {
    top: calc(50% - (260px / 2));
    left: -450px - (25px / 2);

    &::after {
      border-style: solid;
      border-width: 28px 0px 28px 25px;
      border-color: transparent transparent transparent #4a4a44;
      right: -25px;
      top: (260px / 2) - 28px;
    }
  }

  &.right {
    top: calc(50% - (260px / 2));
    right: -450px - (25px / 2);

    &::after {
      border-style: solid;
      border-width: 28px 25px 28px 0px;
      border-color: transparent #4a4a44 transparent transparent ;
      left: -25px;
      top: (260px / 2) - 28px;
    }
  }

}