/* two component tabs */
.two-component-tabs {
  border-radius: 32px;
  width: 100%;
  display: flex;
  align-items: center;
  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);
  gap: 5px;
}
.two-component-tab {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);
  cursor: pointer;
  border-radius: 32px;
  color: #9c9da3;
  flex-direction: column;
  padding: 5px;
  opacity: 0.7;
}
.two-component-tab:nth-child(1) {
  border: 1px solid rgba(103, 190, 122, 1);
}
.two-component-tab.active:nth-child(1),
.two-component-tab:nth-child(1):hover {
  background: rgba(103, 190, 122, 0.6);
  opacity: 1;
}

.two-component-tab:nth-child(2) {
  border: 1px solid rgba(232, 116, 80, 1);
}
.two-component-tab.active:nth-child(2),
.two-component-tab:nth-child(2):hover {
  background: rgba(232, 116, 80, 0.6);
  opacity: 1;
}
.two-component-tab span:first-child {
  font-size: 16px;
}
.two-component-tab span {
  line-height: 130%;
}
.two-component-tab:hover {
  opacity: 0.7;
}
.active-two-component-tab {
  background-color: #ef5350;
  color: #fff;
}
.bg-color {
  background-color: #9ccc65;
}

/* tabs */

.expend-svg {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
}
svg path {
  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);
}
.expend-svg svg:hover path {
  stroke: #3d5afe;
}

.tabs {
  width: fit-content;
  background: var(--body_background);
  border-radius: 8px;
  height: 44px;
  display: flex;
  gap: 6px;
  border: var(--color-card-border);
  padding: 6px;
}
.tab {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 6px 30px;
  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);
  cursor: pointer;
}
.tab:hover {
  opacity: 0.7;
}
.active-tab {
  color: #3d5afe;
}
.tab span {
  background: rgba(255, 255, 255, 0.1);
  width: 17px;
  height: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

/* Text tabs */

.text-tabs {
  width: 100%;
  height: 44px;
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.text-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);
  cursor: pointer;
  width: 100%;
  color: #9c9da3;
  border-bottom: 1px solid #3d5afe00;
  height: inherit;
  position: relative;
}
.active-text-tab {
  color: #fff;
  border-bottom: 1px solid #ffffff;
}
.text-tab:hover {
  color: rgba(255, 255, 255, 0.7);
}
.expend-i path {
  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);
}
.expend path {
  stroke: #3d5afe;
}
.expend-i {
  margin-left: 10px;
}

/* Button Variant */

.button-variant {
  background-color: #3d5afe;
  display: flex;
  height: 60px;
  width: 324px;
  border-radius: 18px;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 15px;
}
.variants-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);
  cursor: pointer;
  color: #fff;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  color: #fff;
}
.variants-btn:hover {
  background-color: #fff;
  color: #3d5afe;
}
.variant-title {
  margin-right: auto;
}
.active-variant-btn {
  background-color: #fff;
  color: #3d5afe;
}
.text-tab__tooltip {
  position: absolute;
  top: calc(100% + 2px);
  min-width: 100%;
  right: 0px;
  background-color: #10282b;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transform: translateY(10px);
  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);
  opacity: 0;
  pointer-events: none;
}
.active-select .text-tab__tooltip {
  transform: translateY(0px);
  opacity: 1;
  pointer-events: all;
}
.text-tab__tooltip-option {
  white-space: nowrap;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  transition: 0.6s cubic-bezier(0.79, 0.01, 0.15, 0.99);
}

.tradeTab {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px 20px 0 0;
  gap: 4px;
}

.tradeTab_item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px 5px 20px;
  width: max-content;
  cursor: pointer;
  border-radius: 20px 20px 0px 0px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tradeTab_item span {
  color: hsla(0, 0%, 100%, 0.16);
}

.item_active {
  background: rgba(255, 255, 255, 0.1);
}

.item_active span {
  color: #c38c5c;
}
