/**
This will wrap all rrac plugin components. Place variables here.
Make sure styles are namespaced adequately since they will be loaded in the 
entire editor and not scoped to the plugin components themselves.
*/

.rrac-plugin-wrapper {
  --rrac-plugin-accent-color: #355ed5;

  --rrac-plugin-color-black: #191818;
  --rrac-plugin-color-gray: #2b2b2b;
  --rrac-plugin-color-gray-bg: #e4e4e4;
  --rrac-plugin-color-blue: #355ed5; 
  --rrac-plugin-color-orange: #eb5a0b;
  --rrac-plugin-color-green: #0db62d;
  --rrac-plugin-color-purple: #7f3993;

}

.rrac-plugin-button {
  backface-visibility: hidden;
  background: rgba(255, 255, 255, 0);
  border: 1px solid var(--rrac-plugin-color-black);
  border-radius: 0;
  box-shadow: 0 0 px rgba(0, 0, 0, 0);
  color: var(--rrac-plugin-color-black);
  display: inline-block;
  line-height: 1;
  padding: 0.5em 1em;
  position: relative;
  text-decoration: none;
  transition: background 0.1s ease-in-out;
  vertical-align: middle;
}

.rrac-plugin-button:visited {
  color: var(--rrac-plugin-color-black);
}

.rrac-plugin-button:hover, 
.rrac-plugin-button:active, 
.rrac-plugin-button:focus {
  background: var(--rrac-plugin-color-gray-bg);
  color: var(--rrac-plugin-color-black);
}

.rrac-plugin-button.button-blue, 
.rrac-plugin-button.button-green,
.rrac-plugin-button.button-orange,
.rrac-plugin-button.button-purple {
	opacity: 1;
	transition: opacity .15s ease-in-out;
}

.rrac-plugin-button.button-blue:visited, 
.rrac-plugin-button.button-green:visited,
.rrac-plugin-button.button-orange:visited,
.rrac-plugin-button.button-purple:visited {
  color: white;
}

.rrac-plugin-button.button-blue:hover, 
.rrac-plugin-button.button-green:hover,
.rrac-plugin-button.button-orange:hover,
.rrac-plugin-button.button-purple:hover,
.rrac-plugin-button.button-blue:focus, 
.rrac-plugin-button.button-green:focus,
.rrac-plugin-button.button-orange:focus,
.rrac-plugin-button.button-purple:focus {
  opacity: .8;
  color: white;
}

.rrac-plugin-button.button-blue {
	background-color: var(--rrac-plugin-color-blue);
	border-color: var(--rrac-plugin-color-blue);
}

.rrac-plugin-button.button-green {
  background-color: var(--rac-plugin-color-green);;
	border-color: var(--rrac-plugin-color-green);;
}

.rrac-plugin-button.button-orange {
  background-color: var(--rrac-plugin-color-orange);
	border-color: var(--rrac-plugin-color-orange);
}

.rrac-plugin-button.button-purple {
  background-color: var(--rrac-plugin-color-purple);
	border-color: var(--rrac-plugin-color-purple);
}