@import '../../../../../../styles/core.scss';

.TutorialStep {
  background: #fff;
  border-radius: 6px;
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  &:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
    outline: 0;
  }

  // open/close styling
  &_close {
    background: rgba(#fff, 0.2);
    cursor: pointer;

    &:hover,
    &:active,
    &:focus {
      background: rgba(#fff, 0.3);
    }

    .TutorialStep-Header {
      border-radius: 6px;
      box-shadow: none;

      &-Input {
        color: #fff;
        cursor: pointer;
      }
    }

    .TutorialStep-Body {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      padding-bottom: 0;
      padding-top: 0;
    }
  }

  + .TutorialStep {
    margin-top: 10px;
  }

  &-Header,
  &-Body {
    padding: 10px;
  }

  &-Header {
    align-items: center;
    box-shadow: inset 0 -1px 0 get(color 'ivory');
    display: flex;

    &-Input {
      flex: 1 1 auto;
      min-width: 0;

      &[readonly] {
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      + .TutorialStep-Header-Button {
        margin-left: 4px;
      }
    }

    &-Button {
      font-size: 18px;
      width: 30px;

      &:disabled {
        display: none;
      }
    }
  }

  &-Body {
    max-height: 100vh;

    &-Description {
      overflow-wrap: break-word;
      padding: ms(-1);
      white-space: pre-wrap; // fallback for Safari; pre-wrap has similar behavior
      white-space: break-spaces;
    }

    &-Textarea {
      height: 120px;
      line-height: 1.4;
    }
  }

  // footer (isReadOnly)
  &-Footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px;

    &-Button {
      :global(.fa-arrow-circle-down) {
        margin-left: 4px;
        transform: rotate(-90deg);
      }
    }
  }

  // isReadOnly inputs/textarea
  [readonly] {
    background: transparent;
    border-color: transparent;

    &:focus {
      border-color: transparent;
      box-shadow: none;
    }
  }
}

// override readme styles
:global(section#hub-content) header.TutorialStep-Header {
  border-bottom: 0;
  margin: 0;
  padding: 10px;
}