.EButton {
  --textColor: var(--colorWhiteBase);
  --intentColor: var(--colorGrayBase);

  display: inline-flex;
  white-space: nowrap;
  width: max-content;
  padding: 8px 24px 7px;
  color: var(--textColor);
  background-color: var(--intentColor);
  font-family: var(--fontsBase);
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  outline: none;
  border: 2px solid var(--intentColor);
  cursor: pointer;
  transition: all 0.15s;
}

.EButton:hover {
  --intentColor: var(--colorGrayDark);
}

.EButton.disabled {
  cursor: not-allowed;
  background: var(--colorGrayLightest);
  color: var(--colorGrayLight);
  border: 2px solid var(--colorGrayLightest);
  text-shadow: none;
}

/* PRIMARY */

.EButton.primary {
  --intentColor: var(--colorBlueBase);
}

.EButton.primary:hover {
  --intentColor: var(--colorBlueDark);
}

/* PRIMARY */

.EButton.safety {
  --intentColor: var(--colorGreenBase);
}

.EButton.safety:hover {
  --intentColor: var(--colorGreenDark);
}

/* PRIMARY */

.EButton.danger {
  --intentColor: var(--colorRedBase);
}

.EButton.danger:hover {
  --intentColor: var(--colorRedDark);
}

/* GHOST */

.EButton.ghost {
  border: 2px solid var(--intentColor);
  color: var(--intentColor);
  text-shadow: none;
  background: none;
}

.EButton.ghost:hover {
  background: var(--intentColor);
  color: var(--colorWhiteBase);
}

/* GHOST PRIMARY */

.EButton.ghost.primary {
  --intentColor: var(--colorBlueBase);
}

.EButton.ghost.primary:hover {
  --intentColor: var(--colorBlueBase);
}

/* GHOST SAFETY */

.EButton.ghost.safety {
  --intentColor: var(--colorGreenBase);
}

.EButton.ghost.safety:hover {
  --intentColor: var(--colorGreenBase);
}

/* GHOST DANGER */

.EButton.ghost.danger {
  --intentColor: var(--colorRedBase);
}

.EButton.ghost.danger:hover {
  --intentColor: var(--colorRedBase);
}

.EButton.ghost.disabled {
  background: none;
  color: var(--colorGrayLightest);
  border: 2px solid var(--colorGrayLightest);
}
