@import '../../styles/abstracts/variables';

.profile-wrapper {
  width: 100%;
  height: 100%;
  position: relative;

  &__sb357 {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .profile-modules {
    .ant-card-body {
      padding: 20px 0;
    }
  }
  &__tab-preview {
    border-radius: 16px;
    transition-duration: 50ms;
    transition-delay: 0;
    .profile-review {
      position: sticky;
      top: 24px;
      max-height: 704px;
    }
  }

  .ant-tabs-nav {
    display: none;
  }

  &__radio-group {
    vertical-align: middle;

    .ant-radio-button-wrapper {
      overflow: hidden;
      width: 84px !important;
      height: 40px !important;
      line-height: 24px !important;
      margin: 0 !important;
      background: $white;
      border: unset;
      padding: 4px 11px;

      .ant-radio-button {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
      }

      > span:nth-child(2) {
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      &:first-child {
        border-radius: 8px 0 0 8px;
      }
      &:last-child {
        border-radius: 0 8px 8px 0;
      }
    }

    .ant-radio-button-wrapper-checked {
      background-color: $blue !important;
      > span {
        color: $white !important;
      }
    }
  }
  .ant-collapse-content > .ant-collapse-content-box {
    padding: 20px;
  }
  .publish-btn {
    background-color: $default;
    font-size: 1rem;
    height: 52px;
    min-width: 116px;
    &.published {
      min-width: 257px;
      span {
        letter-spacing: 1px;
        line-height: 20px;
      }
    }
  }
}
.group-module-add {
  .add-module-card {
    position: unset !important;
    width: 182px;
    z-index: unset !important;
  }
}
.onboarding-item {
  padding: 0 16px;
  background: $grey;
  border-radius: 24px;
  height: 32px;
  cursor: pointer;
  &:hover {
    background: $white;
    border: 1px solid $border2;
  }
}
.warning-alert {
  background: #fff6e8;
  border-radius: 8px;
  border: none;
  padding: 8px 16px;
  .ant-alert-content {
    font-size: 14px;
    line-height: 21px;
    color: $tundola;
  }
}
.max-w-393 {
  max-width: 393px;
}