@import '../colors.css';
@import '../radius.css';

.primary-vars {
  --text-color: var(--dark-peach);
  --text-color-hover: var(--dark-peach);
  --text-color-active: var(--dark-peach);

  --bg: var(--beige);
  --bg-hover: var(--beige-two);
  --bg-active: var(--beige-two);

  --icon-color: var(--dark-peach);
}

.gradiented-vars {
  --text-color: white;
  --text-color-hover: white;
  --text-color-active: white;

  --bg: linear-gradient(250deg, var(--faded-orange), var(--pastel-red));
  --bg-hover: linear-gradient(250deg, var(--dull-orange-two), var(--pale-red));
  --bg-active: var(--beige-two);
}

.dark-vars {
  --text-color: white;
  --text-color-hover: white;
  --text-color-active: white;

  --bg: rgba(#282828, 0.4);
  --bg-hover: rgba(#282828, 0.8);
  --bg-active: rgba(#282828, 0.8);
}

.light-vars {
  --text-color: var(--black);
  --text-color-hover: var(--black);
  --text-color-active: var(--black);

  --bg: white;
  --bg-hover: white;
  --bg-active: white;

  --icon-color: var(--dark-peach);
}

.trans-vars {
  --text-color: white;
  --text-color-hover: white;
  --text-color-active: white;

  --bg: rgba(#e9e9e9, 0.1);
  --bg-hover: rgba(#e9e9e9, 0.15);
  --bg-active: rgba(#e9e9e9, 0.15);

  --icon-color: white;
}

.plain-vars {
  --text-color: inherit;
  --text-color-hover: inherit;
  --text-color-active: inherit;

  --bg: transparent;
  --bg-hover: transparent;
  --bg-active: transparent;

  --underline-color: var(--turquoise-blue);
  --underline-color-hover: var(--turquoise-blue);
  --underline-color-active: var(--turquoise-blue);
}

.dis-vars {
  --text-color: rgba(#ffffff, 0.3);

  --bg: rgba(#e9e9e9, 0.1);

  --icon-color: rgba(#ffffff, 0.3);
}