button {
  cursor: pointer;
}

a.abutton {
  padding: 3px 8px;
  display: inline-block;
}

a.abutton,
a.abutton:hover,
a.abutton:focus {
  text-decoration: none;
}

button.slim {
  padding: 0px 12px;
}

button.nopad {
  padding: 0;
}

button.plain {
  border: 0;
  background-color: transparent;
}

button.plain:hover,
button.plain:active {
  background-color: #e3e3ff;
}

/* button primary is a new style as of 02-17-2026, TODO, update other buttons to use this style */
.button-primary {
  background-color: var(--indigo-500);
  border: 2px solid var(--indigo-500);
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  width: fit-content;
  height: 100%;
  color: var(--white);
  text-decoration: none !important;
  display: inline-block;
  padding: 15px 20px;
  cursor: pointer;

  &:hover {
    background-color: var(--indigo-600);
    color: var(--white) !important;
    border-color: var(--indigo-600);
  }

  &:focus:not(:focus-visible) {
    background-color: var(--indigo-600);
    outline: none;
    box-shadow: none;
  }
  &:focus-visible {
    background-color: var(--indigo-600);
    box-shadow: 0px 0px 0px 4px var(--primary-text);
    outline: 2px solid var(--white);
  }

  &:disabled {
    cursor: not-allowed;
    background-color: var(--middle-gray);
    border: 2px solid var(--middle-gray);
    > span {
      color: var(--gray);
    }
  }
}

.button-secondary {
  background-color: transparent;
  border: 2px solid var(--gray);
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  width: fit-content;
  height: 100%;
  color: var(--primary-text);
  text-decoration: none !important;
  display: inline-block;
  padding: 15px 20px;
  cursor: pointer;

  &:hover {
    border: 2px solid var(--secondary-text);
    color: var(--primary-text) !important;
    background-color: transparent;
  }

  &:focus:not(:focus-visible) {
    background-color: transparent;
    border: 2px solid var(--secondary-text);
  }
  &:focus-visible {
    background-color: transparent;
    border: 2px solid var(--secondary-text);
  }
  &:disabled {
    > span {
      color: var(--gray);
    }
    div {
      color: var(--gray);
    }
    svg {
      fill: var(--gray);
    }
    &:hover {
      border: 2px solid var(--middle-gray);
    }
  }
}

#login-button,
#enroll-button {
  width: 100%;
  margin: 20px 0;
}

.action-link-btn {
  background: none;
  border: none;
  text-decoration: underline;
  color: var(--secondary-text);
  cursor: pointer;
  font-size: 16px;
  &:hover {
    color: var(--indigo-500);
    text-decoration: underline;
  }
  &:focus {
    color: var(--indigo-500);
    text-decoration: underline;
    outline: none !important;
    box-shadow: none;
  }
}