@import '../../../../scss/settings/color-variables.scss';

::ng-deep.ecommerce-metrix-card {
  position: relative;
  overflow: hidden;

  .card-body {
    padding: 32px 36px;

    .icon-symbol {
      color: $white;
      opacity: 0.23;
      font-size: 56px;
      line-height: 0;
    }
  }
  &::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 22.07%, rgba(255, 255, 255, 0.15) 83.21%);
    transform: matrix(0.9, 0.44, -0.44, 0.9, 0, 0);
    right: -70px;
    bottom: 80%;
  }

  &::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 22.07%, rgba(255, 255, 255, 0.15) 83.21%);
    transform: matrix(0.9, 0.44, -0.44, 0.9, 0, 0);
    top: 50%;
    right: -20px;
  }
}

.user-group {
  img {
    position: relative;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    z-index: 2;
    transition: all 0.1s ease-in-out;
    border: 2px solid $white;
    + img {
      margin-left: -14px;
    }
    &:hover {
      z-index: 5;
    }
  }
}

.max-60 {
  max-width: 60%;
}

.img-reader {
  position: absolute;
  right: 0;
  bottom: 1px;
}

.hover-social-card {
  border-top: none;
  color: $white;

  i {
    position: absolute;
    right: 14px;
    top: 14px;
    font-size: 36px;
    opacity: 0.4;
    transition: all ease-in 0.3s;

    ::ng-deep.mantis-rtl & {
      left: 14px !important;
      right: auto !important;
    }
  }
  &:hover i {
    opacity: 1;
    transform: scale(1.1);
  }
}

.rounded-icon-card {
  i {
    display: flex;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    text-align: center;
    padding: 12px;
    font-size: 20px;
  }
}

.user-counter-card {
  &.success {
    background: #8ae65b !important;

    ::ng-deep.mantis-dark & {
      background: #306317 !important;
    }
  }

  &.warning {
    background: #ad6800 !important;

    ::ng-deep.mantis-dark & {
      background: #f3cc62 !important;
    }
  }
  ::ng-deep.icon-img {
    position: absolute;
    left: -17px;
    bottom: -20px;
    color: $white;
    transform: rotate(25deg);
    .contact-icon {
      svg {
        width: 100px;
        height: 100px;
        opacity: 0.35;
      }
    }
  }
}