/*  FILLED COLORS & STATE */
/* PRIMARY */
@property --button-states-primary-default {
  syntax: '<color>';
  inherits: false;
  initial-value: #0d47a1;
}

@property --button-states-primary-hover {
  syntax: '<color>';
  inherits: false;
  initial-value: #04275c;
}

@property --button-states-primary-hover-shadow {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(13, 71, 161, 0.38);
}

@property --button-states-primary-active {
  syntax: '<color>';
  inherits: false;
  initial-value: #04275c;
}

@property --button-states-primary-focus {
  syntax: '<color>';
  inherits: false;
  initial-value: #031c42;
}

@property --button-states-primary-disabled {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(13, 71, 161, 0.35);
}

/* SECONDARY */
@property --button-states-secondary-default {
  syntax: '<color>';
  inherits: false;
  initial-value: #3798d3;
}

@property --button-states-secondary-hover {
  syntax: '<color>';
  inherits: false;
  initial-value: #1772a9;
}

@property --button-states-secondary-hover-shadow {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(130, 134, 139, 0.38);
}

@property --button-states-secondary-active {
  syntax: '<color>';
  inherits: false;
  initial-value: #1772a9;
}

@property --button-states-secondary-focus {
  syntax: '<color>';
  inherits: false;
  initial-value: #074c76;
}

@property --button-states-secondary-disabled {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(55, 152, 211, 0.35);
}

/* SUCCESS */
@property --button-states-success-default {
  syntax: '<color>';
  inherits: false;
  initial-value: #28c76f;
}

@property --button-states-success-hover {
  syntax: '<color>';
  inherits: false;
  initial-value: #28c76f;
}

@property --button-states-success-hover-shadow {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(40, 199, 111, 0.38);
}

@property --button-states-success-active {
  syntax: '<color>';
  inherits: false;
  initial-value: #24b263;
}

@property --button-states-success-focus {
  syntax: '<color>';
  inherits: false;
  initial-value: #24b263;
}

@property --button-states-success-disabled {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(40, 199, 111, 0.65);
}

/* DANGER */
@property --button-states-danger-default {
  syntax: '<color>';
  inherits: false;
  initial-value: #ea5455;
}

@property --button-states-danger-hover {
  syntax: '<color>';
  inherits: false;
  initial-value: #ea5455;
}

@property --button-states-danger-hover-shadow {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(234, 84, 85, 0.65);
}

@property --button-states-danger-active {
  syntax: '<color>';
  inherits: false;
  initial-value: #e73d3e;
}

@property --button-states-danger-focus {
  syntax: '<color>';
  inherits: false;
  initial-value: #e73d3e;
}

@property --button-states-danger-disabled {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(234, 84, 85, 0.65);
}

/* WARNING */
@property --button-states-warning-default {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff9f43;
}

@property --button-states-warning-hover {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff9f43;
}

@property --button-states-warning-hover-shadow {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(255, 159, 67, 0.65);
}

@property --button-states-warning-active {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff922a;
}

@property --button-states-warning-focus {
  syntax: '<color>';
  inherits: false;
  initial-value: #ff922a;
}

@property --button-states-warning-disabled {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(255, 159, 67, 0.65);
}

/* INFO */
@property --button-states-info-default {
  syntax: '<color>';
  inherits: false;
  initial-value: #00cfe8;
}

@property --button-states-info-hover {
  syntax: '<color>';
  inherits: false;
  initial-value: #00cfe8;
}

@property --button-states-info-hover-shadow {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(0, 207, 232, 0.65);
}

@property --button-states-info-active {
  syntax: '<color>';
  inherits: false;
  initial-value: #00b8cf;
}

@property --button-states-info-focus {
  syntax: '<color>';
  inherits: false;
  initial-value: #00b8cf;
}

@property --button-states-info-disabled {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(0, 207, 232, 0.65);
}

/* DARK */
@property --button-states-dark-default {
  syntax: '<color>';
  inherits: false;
  initial-value: #4b4b4b;
}

@property --button-states-dark-hover {
  syntax: '<color>';
  inherits: false;
  initial-value: #4b4b4b;
}

@property --button-states-dark-hover-shadow {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(75, 75, 75, 0.65);
}

@property --button-states-dark-active {
  syntax: '<color>';
  inherits: false;
  initial-value: #343434;
}

@property --button-states-dark-focus {
  syntax: '<color>';
  inherits: false;
  initial-value: #343434;
}

@property --button-states-dark-disabled {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(75, 75, 75, 0.65);
}