/* ========================================================================== */
/* 11) BUTTONS (.ms-button)                                                   */
/* ========================================================================== */

a.ms-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-3);

  padding: var(--ms-space-3) var(--ms-space-5);
  border-radius: var(--ms-radius-sm);

  background-color: var(--ms-primary);
  color: var(--ms-white);

  font-family: var(--ms-font-sans);
  font-weight: var(--ms-fw-medium);
  text-decoration: none;

  position: relative;
  transition: background-color 0.2s ease, color 0.2s ease;

  &::after {
    content: "";
    width: 20px;
    height: 20px;
    background-color: currentColor;

    mask: url('/files/ms-theme/icons/arrow-right.svg') center/20px no-repeat;
    -webkit-mask: url('/files/ms-theme/icons/arrow-right.svg') center/20px no-repeat;

    transition: transform 0.2s ease;
  }

  &:hover {
    background-color: var(--ms-primary-dark);

    &::after {
      transform: translateX(3px);
    }
  }
}