a.ilw-button.ilw-theme-orange-1{
  border: 2px solid var(--ilw-color--control);/* adding this from toolkit3 css, the override isn't working without it */
}

/* adding toolkit 3 button css to toolkit 2 button classes */
:root {
  --ilw-color--white--control: #fff;
  --ilw-color--white--control-text: var(--il-blue);
  --ilw-color--control: var(--ilw-color--white--control);
  --ilw-color--control-text: var(--ilw-color--white--control-text);
  --ilw-button--background-color: var(--ilw-color--control);
  --ilw-button--foreground-color: var(--ilw-color--control-text);
  --ilw-button--border-color: var(--ilw-color--control-text);
  --ilw-button--focused-background-color: var(--ilw-color--focus--background);
  --ilw-button--focused-foreground-color: var(--ilw-color--focus--text);
  --ilw-button--focused-border-color: var(--ilw-color--focus--text);
  --ilw-button--active-color: white;
  --ilw-button--active-background-color: var(--il-orange);
  --ilw-button--active-border-color: var(--il-blue);
}

.il-button {
  background: var(--ilw-button--background-color);
  color: var(--ilw-button--foreground-color);
  border: 2px solid var(--ilw-button--border-color);
  font: 700 1.188rem / 1.25rem var(--il-font-sans);
  display: inline-block;
  margin: 6px 0;
  padding: 12px 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 0.25em;
  letter-spacing: .01em;
  transition: background-color 0.3s;
  cursor: pointer;

  &:visited {
    outline: 0;
    background: var(--ilw-button--background-color);
    color: var(--ilw-button--foreground-color);
    border: 2px solid var(--ilw-button--border-color);
  }

  &:hover {
    outline: 0;
    background: var(--ilw-button--foreground-color);
    color: var(--ilw-button--background-color);
    border-color: var(--ilw-button--border-color);
    text-decoration: underline;
  }

  &:focus {
    background: var(--ilw-color--focus--background);
    color: var(--ilw-color--focus--text);
    border-color: var(--ilw-color--focus--text);
    text-decoration: underline;
    outline: var(--ilw-color--focus--outline);
  }

  &:active {
    background-color: var(--ilw-button--active-background-color);
    color: var(--ilw-button--active-color);
    border-color: var(--ilw-button--active-border-color);
    outline: solid var(--ilw-button--active-border-color) 2px;
  }

  &.il-white-blue {
    --ilw-button--background-color: white;
    --ilw-button--foreground-color: var(--il-blue);
    --ilw-button--border-color: var(--il-blue);
    --ilw-button--focused-background-color: var(--il-blue);
    --ilw-button--focused-foreground-color: white;
    --ilw-button--focused-border-color: var(--il-blue);
  }

  &.il-white-orange {
    --ilw-button--background-color: white;
    --ilw-button--foreground-color: var(--il-orange);
    --ilw-button--border-color: var(--il-orange);
    --ilw-button--focused-background-color: var(--il-orange);
    --ilw-button--focused-foreground-color: white;
    --ilw-button--focused-border-color: var(--il-orange);
  }

  &.il-blue {
    --ilw-button--background-color: var(--il-blue);
    --ilw-button--foreground-color: white;
    --ilw-button--border-color: var(--il-blue);
    --ilw-button--focused-background-color: white;
    --ilw-button--focused-foreground-color: var(--il-blue);
    --ilw-button--focused-border-color: var(--il-blue);
  }

  &.il-orange {
    --ilw-button--background-color: var(--il-orange);
    --ilw-button--foreground-color: white;
    --ilw-button--border-color: var(--il-orange);
    --ilw-button--focused-background-color: white;
    --ilw-button--focused-foreground-color: var(--il-orange);
    --ilw-button--focused-border-color: var(--il-orange);
  }
}

ilw-content[theme="gray"] {
  .il-button {
    &.il-white-orange,
    &.il-orange {
      --ilw-button--background-color: white;
      --ilw-button--foreground-color: var(--il-blue);
      --ilw-button--border-color: var(--il-blue);
      --ilw-button--focused-background-color: var(--il-blue);
      --ilw-button--focused-foreground-color: white;
      --ilw-button--focused-border-color: var(--il-blue);
    }
  }
}
