.xh-tabnav {
  background-color: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 4px 24px 0 rgba(0, 42, 255, 0.08);

  &-bar {
    display: flex;
    align-items: center;
    position: relative;
    height: 88px;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    &-tab {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 32px;
      color: #356aff;
      padding: 24px 32px 16px 32px;
      position: relative;
      border-radius: 20px 20px 0 0;
      transition: background 0.2s, color 0.2s;
      cursor: pointer;
      white-space: nowrap;
      position: relative;

      &-underline {
        position: absolute;
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%);
        width: 36px;
        height: 6px;
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 2px 8px 0 rgba(53, 106, 255, 0.15);
      }

      &.active {
        background: linear-gradient(90deg, #4e8cff 0%, #356aff 100%);
        color: #fff;

        &::before,
        &:not(:last-child)::after {
          content: '';
          width: 20px;
          height: 20px;
          bottom: 0;
          position: absolute;
        }

        &::before {
          left: -20px;
          background: radial-gradient(circle at 0 0, transparent 20px, #356aff 20px);
        }

        &::after {
          right: -20px;
          background: radial-gradient(circle at 20px 0, transparent 20px, #356aff 20px);
        }
      }
    }
  }

  $root: &;

  &-scroll {
    height: calc(100vh - 88px);
    background-color: #f5f5f5;
    padding: 28px 32px;
    width: 100%;
    box-sizing: border-box;

    &-block {
      &:not(:first-child) {
        #{$root}-item {
          margin-top: 20px;
        }
      }
    }
  }

  &-item {
    min-height: 600px;
  }
}