:root {
  /* Button - Link */
  --button--link--background_colour: #1d42a6;
  --button--link--text_colour: white;
  --button--link--border_width: 2px;
  --button--link--border_style: solid;
  --button--link--border_colour: var(--dark_1, #1d42a6);
  --button--link--border_radius: 6px;
  --button--link--font_family: 'Roboto';
  --button--link--font_size: 1.375rem;
  --button--link--font_weight: 500;
  --button--link--font_style: normal;
  --button--link--line_height: 120%;
  /* Button - Link - Active */
  --button--link--active--background_colour: white;
  --button--link--active--text_colour: #1d42a6;
  --button--link--active--border_width: 2px;
  --button--link--active--border_style: solid;
  --button--link--active--border_colour: #1d42a6;
  --button--link--active--border_radius: 6px;
  --button--link--active--font_family: 'Roboto';
  --button--link--active--font_size: 1.375rem;
  --button--link--active--font_weight: 500;
  --button--link--active--font_style: normal;
  --button--link--active--line_height: 120%;
}
/* Main styling */
.oxfcms-button {
  a,
  a:visited {
    background-color: var(--button--link--background_colour);
    color: var(--button--link--text_colour);
    font-family: var(--button--link--font_family);
    font-size: var(--button--link--font_size);
    font-weight: var(--button--link--font_weight);
    font-style: var(--button--link--font_style);
    line-height: var(--button--link--line_height);
    border-width: var(--button--link--border_width);
    border-color: var(--button--link--border_colour);
    border-style: var(--button--link--border_style);
    border-radius: var(--button--link--border_radius);
    text-decoration: none;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    display: inline-flex;
    gap: var(--space-xs);
    align-items: center;
    justify-content: space-between;
    transition: .3s;
    &:hover,
    &:focus {
      background-color: var(--button--link--active--background_colour);
      color: var(--button--link--active--text_colour);
      font-family: var(--button--link--active--font_family);
      font-size: var(--button--link--active--font_size);
      font-weight: var(--button--link--active--font_weight);
      font-style: var(--button--link--active--font_style);
      line-height: var(--button--link--active--line_height);
      border-width: var(--button--link--active--border_width);
      border-color: var(--button--link--active--border_colour);
      border-style: var(--button--link--active--border_style);
      border-radius: var(--button--link--active--border_radius);
      &:not(:has(.screen-reader-only)) {
        .fontawesome-icon {
          color: var(--button--chevron--focus--colour, #1d42a6);
        }
      }
    }
    &:not(:has(.screen-reader-only)) {
      .fontawesome-icon {
        color: var(--button--chevron--colour, #B9D6F2);
      }
    }
  }
}
/* Alignment */
.oxfcms_align_middle_left .oxfcms-button {
  text-align: left;
}
.oxfcms_align_middle_centre .oxfcms-button {
  text-align: center;
}
.oxfcms_align_middle_right .oxfcms-button {
  text-align: right;
}
/* Mercury-specific styling */
.is-mercury-edit-mode {
  .js-lpb-component {
    .lpb-controls {
      + .oxfcms-button {
        a {
          z-index: 10;
        }
      }
    }
  }
}