@use './cards.scss' as *;

.common-font-style {
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.113px;
  text-transform: capitalize;
}

.spacer {
  flex: 1 1 auto;
}

.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.center-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.three-cols-container {
  display: flex;
  align-items: center;
  .left-section {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .center-section {
    @extend .center-content;
  }
  .right-section {
    flex: 1;
    display: flex;
    align-items: center;
  }
}

.two-cols-container {
  display: flex;
  align-items: center;
  .left-section,
  .right-section {
    display: flex;
    align-items: center;
    width: 50%;
  }
}

.gap-5 {
  gap: 5px;
}

.loader-container {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 5px;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 999999999;
}

// Following is a fix/hack for unwanted/unexpected white background-color by the browser ie 'user agent stylesheet'
// for input fields caused by autocomplete especially for login input field
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #23232329;
  background-color: inherit !important;
}

.messsage {
  color: rgba(235, 235, 245, 0.6);
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.07px;
  line-height: 1.5;
}

.avatar {
  width: var(--avatar-width, 30px);
  height: var(--avatar-height, 30px);
  border-radius: 50%;
}

.highlight {
  background-color: var(--highlight-text-bg-color, yellow);
  color: var(--highlight-text-color, #222);
}

.faded-image {
  position: relative;
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.1) 3%,
      rgba(0, 0, 0, 0.3) 6%,
      rgba(0, 0, 0, 0.5) 9%,
      rgba(0, 0, 0, 0.7) 12%,
      rgba(0, 0, 0, 0.9) 15%,
      black 18%,
      black 100%
    ),
    linear-gradient(
      to bottom,
      black 0%,
      black 82%,
      rgba(0, 0, 0, 0.9) 85%,
      rgba(0, 0, 0, 0.7) 88%,
      rgba(0, 0, 0, 0.5) 91%,
      rgba(0, 0, 0, 0.3) 94%,
      rgba(0, 0, 0, 0.1) 97%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.1) 3%,
      rgba(0, 0, 0, 0.3) 6%,
      rgba(0, 0, 0, 0.5) 9%,
      rgba(0, 0, 0, 0.7) 12%,
      rgba(0, 0, 0, 0.9) 15%,
      black 18%,
      black 100%
    ),
    linear-gradient(
      to right,
      black 0%,
      black 82%,
      rgba(0, 0, 0, 0.9) 85%,
      rgba(0, 0, 0, 0.7) 88%,
      rgba(0, 0, 0, 0.5) 91%,
      rgba(0, 0, 0, 0.3) 94%,
      rgba(0, 0, 0, 0.1) 97%,
      transparent 100%
    );
  mask-composite: intersect, intersect, intersect;
}
