@use "design";

$exhale-logo-primary: #44332c;
$exhale-logo-secondary: #66a0ea;

.hqLogo {
  width: auto;
  color: $exhale-logo-primary;

  &.hqLogoSmall {
    height: 25px;
  }
}

// The "HQ" text in the HQ logo.
.hqLogoHq {
  color: $exhale-logo-secondary;
}

.companyWordmark {
  color: $exhale-logo-primary;
}

.fullCompanyLogo,
.magicWallet {
  &.empty {
    .upperSparkle,
    .middleUpperSparkle,
    .middleLowerSparkle,
    .lowerSparkle {
      display: none;
    }
  }

  &.withColor {
    &:not(.reversed) {
      .e,
      .x,
      .h,
      .e,
      .p,
      .a,
      .l,
      .o {
        fill: $exhale-logo-primary;
      }

      .walletFront {
        fill: #fff;
      }

      .walletInside {
        fill: $exhale-logo-secondary;
      }

      .upperSparkle {
        fill: $exhale-logo-primary;
      }

      .walletStroke {
        fill: $exhale-logo-primary;
      }

      .middleUpperSparkle,
      .middleLowerSparkle,
      .lowerSparkle {
        fill: #fff;
      }
    }

    &.reversed {
      .e,
      .x,
      .h,
      .e,
      .p,
      .a,
      .l,
      .o {
        fill: #fff;
      }

      .walletFront {
        fill: #402f28;
      }

      .walletInside {
        fill: #93c1fe;
      }

      .upperSparkle {
        fill: #fff;
      }

      .walletStroke {
        fill: #fff;
      }

      .middleUpperSparkle,
      .middleLowerSparkle,
      .lowerSparkle {
        fill: $exhale-logo-primary;
      }
    }
  }

  &:not(.withColor) {
    &:not(.reversed) {
      .p,
      .a,
      .l,
      .o {
        fill: currentColor;
      }

      &:not(.empty) {
        .walletInside {
          fill: #616161;
        }
      }

      .upperSparkle {
        fill: currentColor;
      }

      .walletStroke {
        fill: currentColor;
      }

      .middleUpperSparkle,
      .middleLowerSparkle,
      .lowerSparkle {
        fill: #fff;
      }
    }
  }
}

.sendIcon {
  &:not(.filled) .fill {
    opacity: 0;
  }

  &.filled .fill {
    opacity: 0.2;
  }

  transition: opacity 250ms;
}

.perksIcon {
  &:not(.filled) .fill {
    opacity: 0;
  }

  &.filled .fill {
    opacity: 0.2;
  }

  transition: opacity 250ms;
}

.paycheckIcon {
  &:not(.filled) .fill {
    display: none;
  }

  &.purple {
    > * {
      fill: design.$color-brand-primary;
    }
  }
}

.profileIcon {
  &:not(.filled) .fill {
    display: none;
  }
}

.chevronIcon {
  &.upChevron {
    transform: rotate(270deg);
  }

  &.leftChevron {
    transform: rotate(180deg);
  }

  &.downChevron {
    transform: rotate(90deg);
  }
}

.triangleIcon {
  &.upTriangle {
    transform: rotate(270deg);
  }

  &.leftTriangle {
    transform: rotate(180deg);
  }

  &.downTriangle {
    transform: rotate(90deg);
  }
}

.circleCheckIcon {
  transition: color 200ms;

  &.complete {
    color: design.$color-success;
  }

  &.incomplete {
    color: design.$neutral-60;
  }
}