@use '../utils' as *;

/*----------------------------------------*/
/* referral scss
/*----------------------------------------*/
.rock-referral-tree-form {
  padding: 35px 24px 35px;
  border-radius: 20px;
}
.rock-referral-tree-form {
  .title {
    color: var(--td-white);
    font-size: 20px;
    margin-bottom: 20px;
    @media #{$xs} {
      font-size: 18px;
    }
  }
}
.rock-referral-tree-form-grid {
  .rock-single-input {
    .input-field {
      display: flex;
      align-items: end;
      gap: 20px;
      width: 100%;
      @media #{$xxs} {
        flex-wrap: wrap;
      }
      input {
        color: var(--td-white);
        @include td-placeholder {
          color: var(--td-white);
        }
      }
    }
    .description {
      font-size: 12px;
      margin-top: 10px;
      font-weight: 300;
      color: var(--td-white);
    }
  }
}
// referral tree
.rock-referral-tree-item {
  padding: 0 16px;
  position: relative;
  @media #{$xs} {
    padding: 0 8px;
  }
}
.rock-referral-tree-card-inner {
  position: relative;
  &::before {
    position: absolute;
    content: "";
    height: 5px;
    width: 5px;
    background: rgba($white, $alpha: 0.3);
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    z-index: 5;
  }
}
.rock-referral-tree-card {
	padding: 10px 12px;
	border-radius: 12px;
	display: inline-flex;
	flex-direction: column;
	gap: 10px;
  background: rgba($white, $alpha: 0.1);
  backdrop-filter: blur(4.69592px);
  border-radius: 12px;
  min-width: 240px;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    @include border-radius(12px);
    padding: 1px;
    background: linear-gradient(139.9deg,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.2) 100%);
    -webkit-mask: linear-gradient(var(--td-white) 0 0) content-box, linear-gradient(var(--td-white) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
  }
  &.tree-parent {
    background: linear-gradient(135deg, var(--td-secondary) 0%, var( --td-tertiary) 100%);
    box-shadow: inset -4px 4px 10px rgba($white, $alpha: 0.5);
    min-width: max-content;
    &::before {
      display: none;
    }
    &::after {
      position: absolute;
      content: "";
      width: 6px;
      height: 6px;
      background: rgba($white, $alpha: 0.3);
      left: 50%;
      transform: translateX(-50%);
      top: calc(100% + -3px);
      border-radius: 50%;
      z-index: 5;
    }
  }
	.thumb {
		max-width: 30px;
	}
	.content {
		.title {
			font-size: 12px;
			font-weight: 700;
      margin-bottom: 0;
      text-align: left;
		}
    .info {
      font-size: 10px;
      font-weight: 300;
      color: var(--td-white);
      text-align: left;
    }
	}
}
// referral tab
.rock-referral-logs-tab {
  &.td-tab {
    .nav-tabs {
      display: flex;
      gap: 5px 0;
      margin-bottom: 24px;
      .nav-link {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--td-white);
        @include inline-flex();
        align-items: center;
        gap: 10px;
        height: 38px;
        mix-blend-mode: normal;
        @include border-radius(1000px);
        padding: 0 16px;
        &.active {
          background: linear-gradient(135deg, var(--td-primary) 0%, var(--td-tertiary) 100%);
          box-shadow: inset -4px 4px 10px rgba($white, $alpha: 0.5);
        }
      }
    }
  }
}

//referral tree
.rock-referral-tree-wrapper {
	max-width: max-content;
	margin: 0 auto;
  margin-top: 15px;
  @media screen and (max-width: 1920px) {
    overflow-x: scroll;
    margin-top: 10px;
  }
}
.rock-referral-tree {
  min-width: 1000px;
  padding-bottom: 20px;
	ul {
		padding-top: 20px;
		position: relative;
		transition: all 0.5s;
		display: flex;
		ul {
			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 50%;
				border-left: 1px solid rgba($white, $alpha: 0.3);
				width: 0;
				height: 20px;
			}
		}
	}
	li {
		float: left;
		text-align: center;
		list-style-type: none;
		position: relative;
		padding: 20px 5px 0 5px;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		&::after {
			right: auto;
			left: 50%;
			border-left: 1px solid rgba($white, $alpha: 0.3);
		}
		&:only-child {
			padding-top: 0;
		}
		&:last-child {
			&::before {
				border-right: 1px solid rgba($white, $alpha: 0.3);
				border-radius: 0 0px 0 0;
			}
		}
		&:first-child {
			&::after {
				border-radius: 0px 0 0 0;
			}
		}
	}
}
.rock-referral-tree li::before,
.rock-referral-tree li::after {
	content: "";
	position: absolute;
	top: 0;
	right: 50%;
	border-top: 1px solid rgba($white, $alpha: 0.3);
	width: 50%;
	height: 20px;
}
.rock-referral-tree li:only-child::after,
.rock-referral-tree li:only-child::before {
	display: none;
}
.rock-referral-tree li:first-child::before,
.rock-referral-tree li:last-child::after {
	border: 0 none;
}
