/*
  _____ _ 
 |_   _| |_  ___ _ __  ___
   | | | ' \/ -_) '  \/ -_)
   |_| |_||_\___|_|_|_\___|

    Font:           BLANK
    Colors:
     - Primary      #1740cf    rgba( 23,  64, 207, 1)  // Blue
     - Secondary:   #F3F4F6    rgba(243, 244, 246, 1)  // Light Grey
     - Backgrounds: #F8FAFF    rgba(248, 250, 255, 1)  // White Smoke
*/

body {
    font-family: 'Inter', sans-serif;
}

.btn {
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
    font-weight: 500;
    padding: 16px 32px;
    border-radius: 9999px;
    font-size: 18px;
}

.btn.primary {
    background-color: #1740cf;
    background: linear-gradient(90deg,#2b59f7, #1740cf);
    color: white;
}

.btn.primary:hover {
    background-color: #2563EB;
}

.btn.primary:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.btn.secondary {
    background-color: #F3F4F6;
    color: #374151;
    /* padding: 8px 16px; */
    /* border-radius: 6px; */
}

.btn.secondary:hover {
    background-color: #E5E7EB;
}

/* Inverted removed the bg and sets the border & txt color to the prev. bg color*/
.btn.primary.inverted {
    background-color: none;
    background: none;
    border: 1px solid #1740cf;
    color: #1740cf;
}

.btn.small {
    padding: 8px 16px;
    font-size: 14px; 
}

.btn.primary:disabled {
    filter: saturate(0.3) brightness(1.2);
    opacity: 0.65;
    cursor: not-allowed;
}
  
.btn.secondary:disabled {
    filter: saturate(0.3) brightness(1.2);
    opacity: 0.65;
    cursor: not-allowed;
}

.btn.alert:disabled {
    filter: saturate(0.3) brightness(1.2);
    opacity: 0.65;
    cursor: not-allowed;
}

/* Button: Dark Background Adjustments */
.btn.primary.dark {
    background: none;
    background-color: #fff;
    border: 1px solid #dedede;
    color: #2341ff;
}

/* Button: Unstyled */
.btn.unstyled, .btn.unstyled:hover, .btn.unstyled:focus {
    background-color: none;
    background: none;
    border: none;
    color: #2341ff;
}

/* Button: Unstyled */
.btn.dark.unstyled, .btn.dark.unstyled:hover, .btn.dark.unstyled:focus {
    background-color: none;
    background: none;
    border: none;
    color: #fff;
}



/* FONTS */

.highlight-word.dark {
  background: -webkit-linear-gradient(180deg, #6999FF, #00E5FF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.highlight-word {
  background: -webkit-linear-gradient(180deg, #8438EE, #0CA0B1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

}

/* TAG ELEMENT */
.highlight-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 9999px;
  background: white;
  /*  border: 2px solid green;*/ /* TODO: This is getting applied instead of linear-gradient */
  /*  color: transparent;*/

  /* Cursor says, */
  border: 2px solid transparent;
  background-image: linear-gradient(white, white), linear-gradient(-90deg, #8438EE, #0CA0B1);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #8438EE;
  /*  */

  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

.highlight-tag::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 9999px;
  background: linear-gradient(-90deg, #8438EE, #0CA0B1);
  z-index: -1;
}

.highlight-tag::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: linear-gradient(-90deg, #8438EE, #0CA0B1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 14px;
  font-weight: 500;
}


/* SECTION ICON ELEMENT */
.highlight-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: white;
  border: 1px solid transparent;
  background-image: linear-gradient(white, white), linear-gradient(-90deg, #8438EE, #0CA0B1);
  background-origin: border-box;
  background-clip: content-box, border-box;
  transition: all 0.2s ease;
}

.highlight-section-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #8438EE;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: linear-gradient(-90deg, #8438EE, #0CA0B1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}