@import '../../style/variable';
@import './token';

.#{$namespace} {
  &-guide {
    &__header {
      height: $guide-header-height;
      padding: $guide-header-padding;
      background-color: $white;

      &-title {
        color: rgb(0 0 0 / 85%);
        font-weight: bold;
        font-size: 20px;
        line-height: 28px;
      }

      &-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 6px;

        &-desc {
          color: rgb(0 0 0 / 65%);
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
        }

        &-action {
          color: $guide-header-action-color;
          font-weight: 400;
          font-size: 14px;
          line-height: 22px;
          cursor: pointer;
        }
      }
    }

    &-flow {
      padding: $guide-flow-padding-ver $guide-flow-padding-hor;
      background-color: $guide-flow-background-color;

      &__card {
        padding-top: 16px;
        padding-bottom: 20px;
        overflow: hidden;
        background-color: $white;
        border-radius: $border-radius-medium;

        &-header {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          padding-right: 20px;
          padding-left: 16px;

          &-title {
            color: #1d2129;
            font-weight: bold;
            font-size: 16px;
            line-height: 24px;
          }

          &-action {
            color: rgb(0 0 0 / 44.7%);
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
              transform: rotateZ(360deg);
            }
          }
        }

        &-body {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding-top: 20px;
          padding-bottom: 20px;
        }
      }
    }
  }
}