ul.ilw-buttons, ul.ilw-buttons-left {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 16px;
    margin: 10px 0 0 0;
}

ul.ilw-buttons {
    justify-content: center;
}

ul.ilw-buttons-left {
    justify-content: left;
}

ul.ilw-buttons li {
    list-style: none;
    margin: 0;
    padding: 0;
}

a.ilw-button, button.ilw-button, ul.ilw-buttons a, ul.ilw-buttons button {
    background: var(--ilw-color--control);
    color: var(--ilw-color--control-text);
    border: 2px solid var(--ilw-color--control-text);
    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-color--control);
        color: var(--ilw-color--control-text);
        border: 2px solid var(--ilw-color--control-text);
    }

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

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

a.ilw-button.ilw-theme-blue-1, button.ilw-button.ilw-theme-blue-1, ul.ilw-buttons a.ilw-theme-blue-1, ul.ilw-buttons button.ilw-theme-blue-1,
a.ilw-button.ilw-theme-blue-1:visited, button.ilw-button.ilw-theme-blue-1:visited, ul.ilw-buttons a.ilw-theme-blue-1:visited, ul.ilw-buttons button.ilw-theme-blue-1:visited, 
a.ilw-button.ilw-theme-orange-1, button.ilw-button.ilw-theme-orange-1, ul.ilw-buttons a.ilw-theme-orange-1, ul.ilw-buttons button.ilw-theme-orange-1,
a.ilw-button.ilw-theme-orange-1:visited, button.ilw-button.ilw-theme-orange-1:visited, ul.ilw-buttons a.ilw-theme-orange-1:visited, ul.ilw-buttons button.ilw-theme-orange-1:visited,
a.ilw-button.ilw-theme-blue-solid, button.ilw-button.ilw-theme-blue-solid, ul.ilw-buttons a.ilw-theme-blue-solid, ul.ilw-buttons button.ilw-theme-blue-solid,
a.ilw-button.ilw-theme-blue-solid:visited, button.ilw-button.ilw-theme-blue-solid:visited, ul.ilw-buttons a.ilw-theme-blue-solid:visited, ul.ilw-buttons button.ilw-theme-blue-solid:visited, 
a.ilw-button.ilw-theme-orange-solid, button.ilw-button.ilw-theme-orange-solid, ul.ilw-buttons a.ilw-theme-orange-solid, ul.ilw-buttons button.ilw-theme-orange-solid,
a.ilw-button.ilw-theme-orange-solid:visited, button.ilw-button.ilw-theme-orange-solid:visited, ul.ilw-buttons a.ilw-theme-orange-solid:visited, ul.ilw-buttons button.ilw-theme-orange-solid:visited,
a.ilw-button.ilw-theme-blue-1:hover, button.ilw-button.ilw-theme-blue-1:hover, ul.ilw-buttons a.ilw-theme-blue-1:hover, ul.ilw-buttons button.ilw-theme-blue-1:hover, 
a.ilw-button.ilw-theme-orange-1:hover, button.ilw-button.ilw-theme-orange-1:hover, ul.ilw-buttons a.ilw-theme-orange-1:hover, ul.ilw-buttons button.ilw-theme-orange-1:hover,
a.ilw-button.ilw-theme-blue-solid:hover, button.ilw-button.ilw-theme-blue-solid:hover, ul.ilw-buttons a.ilw-theme-blue-solid:hover, ul.ilw-buttons button.ilw-theme-blue-solid:hover, 
a.ilw-button.ilw-theme-orange-solid:hover, button.ilw-button.ilw-theme-orange-solid:hover, ul.ilw-buttons a.ilw-theme-orange-solid:hover, ul.ilw-buttons button.ilw-theme-orange-solid:hover {
    border: 2px solid var(--ilw-color--control);
}

button.ilw-button:disabled, ul.ilw-buttons button:disabled, 
button.ilw-button:disabled:hover, ul.ilw-buttons button:disabled:hover {
    background-color: white;
    color: var(--il-storm-lighter-1);
    border: 2px solid var(--il-storm-lighter-1);
    outline: none;
    cursor: initial;
    text-decoration: none;
}

a.ilw-button.ilw-button-large, button.ilw-button-large, ul.ilw-buttons.ilw-button-large a, ul.ilw-buttons.ilw-button-large button {
    font-size: 2rem;
    line-height: 2.5rem;
    padding: 20px 40px;
}

a.ilw-button.ilw-button-small, button.ilw-button-small, ul.ilw-buttons.ilw-button-small a, ul.ilw-buttons.ilw-button-small button  {
    padding: 4px 6px;
}

.ilw-button.ilw-width-full, button.ilw-width-full {
    position: initial;
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.ilw-buttons.ilw-width-full {
    width: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding-left: 0;
    padding-right: 0;

    li {
        flex-grow: 2;

        a, button {
            width: 100%;
            padding-left: 0;
            padding-right: 0;
        }
    }
}

a.ilw-button[target="_blank"]::after, .ilw-buttons a[target="_blank"]::after{
  display: var(--ilw-new-window--display, inline-block);
  content: var(--ilw-new-window--content, "");
  mask-image: var(--ilw-new-window--mask-image, url(https://cdn.brand.illinois.edu/icons/solid/blue/link.svg));
  margin-left:  var(--ilw-new-window--margin-left, 0);
  position: relative;
  width: var(--ilw-new-window--width, 1em);
  height: var(--ilw-new-window--height, 1em);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  text-decoration: none;
  vertical-align: middle;
  background-color: var(--ilw-new-window--background-color, currentColor);
}