/* -----------------------------------------
   BUTTONS
   /src/css/cagov/button.css
----------------------------------------- */

/* PRIMARY BUTTON */
.btn-primary {
  color: var(--white, #fff);
  background-color: var(--color-p2, #046b99);
  border-color: var(--color-p2, #046b99);
  font-weight: var(--font-weight-6);

  &:focus {
    outline: solid 2px var(--outline-dark-mode-color, #85cbf9) !important;
    outline-offset: -4px;
  }

  &:disabled {
    color: var(--white, #fff) !important;
  }

  .badge {
    color: var(--color-p2, #046b99);
    background-color: var(--white, #fff);
  }
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled, .disabled):active,
.btn-primary:not(:disabled, .disabled).active,
.btn-primary .show > .dropdown-toggle,
.open > .dropdown-toggle .btn-primary {
  color: var(--white, #fff);
  background-color: var(--color-p2-darker, #214a68);
  border-color: var(--color-p2-darker, #214a68);
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
  background-image: none;
}

.btn-primary.disabled,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary.disabled.active,
.btn-primary[disabled],
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary.active {
  background-color: var(--color-p2, #046b99) !important;
  border-color: var(--color-p2, #046b99);
}

/*  PRIMARY OUTLINE BUTTON */
.btn-outline-primary {
  color: var(--color-p2, #046b99);
  background-color: var(--white, #fff);
  border-color: var(--color-p2, #046b99);
  font-weight: var(--font-weight-6);

  &:focus {
    outline: solid 2px var(--outline-default-color) !important;
    outline-offset: -4px;
  }

  .badge {
    color: var(--white, #fff);
    background-color: var(--color-p2, #046b99);
  }
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled, .disabled):active,
.btn-outline-primary:not(:disabled, .disabled).active,
.btn-outline-primary .show > .dropdown-toggle,
.open > .dropdown-toggle .btn-outline-primary {
  color: var(--color-p2-darker, #214a68);
  background-color: var(--white, #fff);
  border-color: var(--color-p2-darker, #214a68);
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
  background-image: none;
}

.btn-outline-primary .btn-outline-primary.disabled,
.btn-outline-primary.disabled:hover,
.btn-outline-primary.disabled:focus,
.btn-outline-primary.disabled:active,
.btn-outline-primary.disabled.active,
.btn-outline-primary[disabled],
.btn-outline-primary[disabled]:hover,
.btn-outline-primary[disabled]:focus,
.btn-outline-primary[disabled]:active,
.btn-outline-primary[disabled].active,
fieldset[disabled] .btn-outline-primary,
fieldset[disabled] .btn-outline-primary:hover,
fieldset[disabled] .btn-outline-primary:focus,
fieldset[disabled] .btn-outline-primary:active,
fieldset[disabled] .btn-outline-primary.active {
  background-color: var(--white, #fff) !important;
  border-color: var(--color-p2, #046b99);
}

/*  DEFAULT BUTTON */
.btn-default {
  color: var(--gray-700, #5e5e6a);
  background-color: var(--gray-50, #fafafa);
  border-color: var(--gray-700, #5e5e6a);
  font-weight: var(--font-weight-6);

  &:focus {
    outline: solid 2px var(--outline-default-color) !important;
    outline-offset: -4px;
  }

  .badge {
    color: rgb(255 255 255 / 65%);
    background-color: var(--gray-700, #5e5e6a);
  }
}

.btn-default:hover,
.btn-default:focus,
.btn-default:not(:disabled, .disabled):active,
.btn-default:not(:disabled, .disabled).active,
.btn-default .show > .dropdown-toggle,
.open > .dropdown-toggle .btn-default {
  color: var(--black, #000);
  background-color: var(--gray-75, #f8f9fa);
  border-color: var(--black, #000);
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
  background-image: none;
}

.btn-default.disabled,
.btn-default.disabled:hover,
.btn-default.disabled:focus,
.btn-default.disabled:active,
.btn-default.disabled.active,
.btn-default[disabled],
.btn-default[disabled]:hover,
.btn-default[disabled]:focus,
.btn-default[disabled]:active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default,
fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default.active {
  background-color: rgba(255 255 255 / 65%) !important;
  border-color: var(--gray-700, #5e5e6a);
}

/* STANDOUT BUTTON */
.btn-standout {
  color: var(--white, #fff);
  background-color: var(--color-p3, #323a45);
  border-color: var(--color-p3, #323a45);
  font-weight: var(--font-weight-6);

  &:focus {
    outline: solid 2px var(--outline-dark-mode-color, #85cbf9) !important;
    outline-offset: -4px;
  }

  .badge {
    color: var(--color-p3, #323a45);
    background-color: var(--white, #fff);
  }

  &:disabled,
  &.disabled {
    color: var(--white, #fff) !important;
  }
}

.btn-standout:hover,
.btn-standout:focus,
.btn-standout:not(:disabled, .disabled):active,
.btn-standout:not(:disabled, .disabled).active,
.btn-standout .show > .dropdown-toggle,
.open > .dropdown-toggle .btn-standout {
  color: var(--white, #fff);
  background-color: var(--color-p3-darker, #242830);
  border-color: var(--color-p3-darker, #242830);
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
  background-image: none;
}

.btn-standout.disabled,
.btn-standout.disabled:hover,
.btn-standout.disabled:focus,
.btn-standout.disabled:active,
.btn-standout.disabled.active,
.btn-standout[disabled],
.btn-standout[disabled]:hover,
.btn-standout[disabled]:focus,
.btn-standout[disabled]:active,
.btn-standout[disabled].active,
fieldset[disabled] .btn-standout,
fieldset[disabled] .btn-standout:hover,
fieldset[disabled] .btn-standout:focus,
fieldset[disabled] .btn-standout:active,
fieldset[disabled] .btn-standout.active {
  background-color: var(--color-p3, #323a45) !important;
  border-color: var(--color-p3, #323a45);
}

/* STANDOUT OUTLINE BUTTON */
.btn-outline-standout {
  color: var(--color-p3, #323a45);
  background-color: var(--white, #fff);
  border-color: var(--color-p3, #323a45);
  font-weight: var(--font-weight-6);

  &:focus {
    outline: solid 2px var(--outline-default-color) !important;
    outline-offset: -4px;
  }

  .badge {
    color: var(--white, #fff);
    background-color: var(--color-p3, #323a45);
  }
}

.btn-outline-standout:hover,
.btn-outline-standout:focus,
.btn-outline-standout:not(:disabled, .disabled):active,
.btn-outline-standout:not(:disabled, .disabled).active,
.btn-outline-standout .show > .dropdown-toggle,
.open > .dropdown-toggle .btn-outline-standout {
  color: var(--color-p3-darker, #242830);
  background-color: var(--white, #fff);
  border-color: var(--color-p3-darker, #242830);
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
  background-image: none;
}

.btn-outline-standout.disabled,
.btn-outline-standout.disabled:hover,
.btn-outline-standout.disabled:focus,
.btn-outline-standout.disabled:active,
.btn-outline-standout.disabled.active,
.btn-outline-standout[disabled],
.btn-outline-standout[disabled]:hover,
.btn-outline-standout[disabled]:focus,
.btn-outline-standout[disabled]:active,
.btn-outline-standout[disabled].active,
fieldset[disabled] .btn-outline-standout,
fieldset[disabled] .btn-outline-standout:hover,
fieldset[disabled] .btn-outline-standout:focus,
fieldset[disabled] .btn-outline-standout:active,
fieldset[disabled] .btn-outline-standout.active {
  background-color: var(--white, #fff) !important;
  border-color: var(--color-p3, #323a45);
}

/* HIGHLIGHT BUTTON */
.btn-highlight {
  color: var(--black, #000);
  background-color: var(--color-p1-light, #f2c45a);
  border-color: var(--color-p1-light, #f2c45a);
  font-weight: var(--font-weight-6);

  &:focus {
    outline: solid 2px var(--black, #000) !important;
    outline-offset: -4px;
  }

  .badge {
    color: var(--color-p1-light, #f2c45a);
    background-color: var(--black, #000);
  }
}

.btn-highlight:hover,
.btn-highlight:focus,
.btn-highlight:not(:disabled, .disabled):active,
.btn-highlight:not(:disabled, .disabled).active,
.btn-highlight .show > .dropdown-toggle,
.open > .dropdown-toggle .btn-highlight {
  color: var(--gray-900, #3b3a48);
  background-color: var(--color-p1-lighter, #f5ce73);
  border-color: var(--color-p1-lighter, #f5ce73);
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
  background-image: none;
}

.btn-highlight.disabled,
.btn-highlight.disabled:hover,
.btn-highlight.disabled:focus,
.btn-highlight.disabled:active,
.btn-highlight.disabled.active,
.btn-highlight[disabled],
.btn-highlight[disabled]:hover,
.btn-highlight[disabled]:focus,
.btn-highlight[disabled]:active,
.btn-highlight[disabled].active,
fieldset[disabled] .btn-highlight,
fieldset[disabled] .btn-highlight:hover,
fieldset[disabled] .btn-highlight:focus,
fieldset[disabled] .btn-highlight:active,
fieldset[disabled] .btn-highlight.active {
  background-color: var(--color-p1-light, #f2c45a) !important;
  border-color: var(--color-p1-light, #f2c45a);
}

/* HIGHLIGHT OUTLINE BUTTON */
.btn-outline-highlight {
  color: var(--black, #000);
  background-color: transparent;
  border-color: var(--color-p1-light, #f2c45a);
  font-weight: var(--font-weight-6);

  &:focus {
    outline: solid 2px var(--outline-default-color) !important;
    outline-offset: -4px;
  }

  .badge {
    color: transparent;
    background-color: var(--black, #000);
  }
}

.btn-outline-highlight:hover,
.btn-outline-highlight:focus,
.btn-outline-highlight:not(:disabled, .disabled):active,
.btn-outline-highlight:not(:disabled, .disabled).active,
.btn-outline-highlight .show > .dropdown-toggle,
.open > .dropdown-toggle .btn-outline-highlight {
  color: var(--gray-900, #3b3a48);
  background-color: var(--gray-50, #fafafa);
  border-color: var(--color-p1-lighter, #f5ce73);
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
  background-image: none;
}

.btn-outline-highlight.disabled,
.btn-outline-highlight.disabled:hover,
.btn-outline-highlight.disabled:focus,
.btn-outline-highlight.disabled:active,
.btn-outline-highlight.disabled.active,
.btn-outline-highlight[disabled],
.btn-outline-highlight[disabled]:hover,
.btn-outline-highlight[disabled]:focus,
.btn-outline-highlight[disabled]:active,
.btn-outline-highlight[disabled].active,
fieldset[disabled] .btn-outline-highlight,
fieldset[disabled] .btn-outline-highlight:hover,
fieldset[disabled] .btn-outline-highlight:focus,
fieldset[disabled] .btn-outline-highlight:active,
fieldset[disabled] .btn-outline-highlight.active {
  background-color: transparent !important;
  border-color: var(--color-p1-light, #f2c45a);
}

/* SECONDARY BUTTON */
.btn-secondary {
  color: var(--gray-700, #5e5e6a);
  background-color: var(--gray-50, #fafafa);
  border-color: var(--gray-700, #5e5e6a);
  font-weight: var(--font-weight-6);
  border-width: 1px;

  &:focus {
    outline: solid 2px var(--outline-default-color) !important;
    outline-offset: -4px;
  }

  &:disabled,
  &.disabled {
    color: var(--black, #000);
  }

  &.active {
    background: #fff;
    color: var(--black, #000);
    box-shadow: none;
  }

  .badge {
    color: var(--gray-50, #fafafa);
    background-color: var(--gray-700, #5e5e6a);
  }
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled, .disabled):active,
.btn-secondary:not(:disabled, .disabled).active,
.btn-secondary .show > .dropdown-toggle,
.open > .dropdown-toggle .btn-secondary {
  color: var(--link-hover-color, #005a7f);
  background-color: #fff;
  border-color: var(--black, #000);
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
  background-image: none;
}

.btn-secondary.disabled,
.btn-secondary.disabled:hover,
.btn-secondary.disabled:focus,
.btn-secondary.disabled:active,
.btn-secondary.disabled.active,
.btn-secondary[disabled],
.btn-secondary[disabled]:hover,
.btn-secondary[disabled]:focus,
.btn-secondary[disabled]:active,
.btn-secondary[disabled].active,
fieldset[disabled] .btn-secondary,
fieldset[disabled] .btn-secondary:hover,
fieldset[disabled] .btn-secondary:focus,
fieldset[disabled] .btn-secondary:active,
fieldset[disabled] .btn-secondary.active {
  background-color: var(--gray-50, #fafafa) !important;
  border-color: var(--gray-700, #5e5e6a);
}

/* SECONDARY OUTLINE BUTTON */
.btn-outline-secondary {
  color: var(--gray-700, #5e5e6a);
  background-color: var(--white, #fff);
  border-color: var(--gray-700, #5e5e6a);
  font-weight: var(--font-weight-6);

  &:focus {
    outline: solid 2px var(--outline-default-color) !important;
    offset: -4px;
  }

  .badge {
    color: var(--white, #fff);
    background-color: var(--gray-700, #5e5e6a);
  }
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:not(:disabled, .disabled):active,
.btn-outline-secondary:not(:disabled, .disabled).active,
.btn-outline-secondary .show > .dropdown-toggle,
.open > .dropdown-toggle .btn-outline-secondary {
  color: var(--gray-900, #3b3a48);
  background-color: var(--white, #fff);
  border-color: var(--gray-900, #3b3a48);
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
  background-image: none;
}

.btn-outline-secondary.disabled,
.btn-outline-secondary.disabled:hover,
.btn-outline-secondary.disabled:focus,
.btn-outline-secondary.disabled:active,
.btn-outline-secondary.disabled.active,
.btn-outline-secondary[disabled],
.btn-outline-secondary[disabled]:hover,
.btn-outline-secondary[disabled]:focus,
.btn-outline-secondary[disabled]:active,
.btn-outline-secondary[disabled].active,
fieldset[disabled] .btn-outline-secondary,
fieldset[disabled] .btn-outline-secondary:hover,
fieldset[disabled] .btn-outline-secondary:focus,
fieldset[disabled] .btn-outline-secondary:active,
fieldset[disabled] .btn-outline-secondary.active {
  background-color: var(--white, #fff) !important;
  border-color: var(--gray-700, #5e5e6a);
}

/*  S1 BUTTON */
.btn-s1 {
  color: var(--gray-700, #5e5e6a);
  background-color: var(--color-s1, #eef8fb);
  border-color: var(--gray-700, #5e5e6a);
  font-weight: var(--font-weight-6);

  &:focus {
    outline: solid 2px var(--outline-default-color) !important;
    outline-offset: -4px;
  }

  &.active {
    background: #fff;
  }

  &.active,
  &:disabled {
    color: var(--black, #000);
  }

  .badge {
    color: var(--color-s1, #eef8fb);
    background-color: var(--gray-700, #5e5e6a);
  }
}

.btn-s1:hover,
.btn-s1:focus,
.btn-s1:not(:disabled, .disabled):active,
.btn-s1:not(:disabled, .disabled).active,
.btn-s1 .show > .dropdown-toggle,
.open > .dropdown-toggle .btn-s1 {
  color: var(--black, #000);
  background-color: #fff;
  border-color: var(--black, #000);
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
  background-image: none;
}

.btn-s1.disabled,
.btn-s1.disabled:hover,
.btn-s1.disabled:focus,
.btn-s1.disabled:active,
.btn-s1.disabled.active,
.btn-s1[disabled],
.btn-s1[disabled]:hover,
.btn-s1[disabled]:focus,
.btn-s1[disabled]:active,
.btn-s1[disabled].active,
fieldset[disabled] .btn-s1,
fieldset[disabled] .btn-s1:hover,
fieldset[disabled] .btn-s1:focus,
fieldset[disabled] .btn-s1:active,
fieldset[disabled] .btn-s1.active {
  background-color: var(--color-s1, #eef8fb) !important;
  border-color: var(--gray-700, #5e5e6a);
}

/* LIGHT BUTTON */
.btn-light {
  color: var(--gray-700, #5e5e6a);
  background-color: var(--white, #fff);
  border-color: var(--white, #fff);
  font-weight: var(--font-weight-6);

  &:focus {
    outline: solid 2px var(--outline-default-color) !important;
    outline-offset: -4px;
  }

  .badge {
    color: var(--white, #fff);
    background-color: var(--gray-700, #5e5e6a);
  }
}

.btn-light:hover,
.btn-light:focus,
.btn-light:not(:disabled, .disabled):active,
.btn-light:not(:disabled, .disabled).active,
.btn-light .show > .dropdown-toggle,
.open > .dropdown-toggle .btn-light {
  color: var(--black, #000);
  background-color: var(--gray-100, #f3f3f4);
  border-color: var(--gray-100, #f3f3f4);
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
  background-image: none;
}

.btn-light.disabled,
.btn-light.disabled:hover,
.btn-light.disabled:focus,
.btn-light.disabled:active,
.btn-light.disabled.active,
.btn-light[disabled],
.btn-light[disabled]:hover,
.btn-light[disabled]:focus,
.btn-light[disabled]:active,
.btn-light[disabled].active,
fieldset[disabled] .btn-light,
fieldset[disabled] .btn-light:hover,
fieldset[disabled] .btn-light:focus,
fieldset[disabled] .btn-light:active,
fieldset[disabled] .btn-light.active {
  background-color: var(--white, #fff) !important;
  border-color: var(--white, #fff);
}

/* LIGHT OUTLINE BUTTON */
.btn-outline-light {
  color: var(--white, #fff);
  background-color: transparent;
  border-color: var(--white, #fff);
  font-weight: var(--font-weight-6);

  &:focus {
    outline: solid 2px var(--outline-dark-mode-color) !important;
    outline-offset: -4px;
  }

  .badge {
    color: transparent;
    background-color: var(--white, #fff);
  }
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:not(:disabled, .disabled):active,
.btn-outline-light:not(:disabled, .disabled).active,
.btn-outline-light .show > .dropdown-toggle,
.open > .dropdown-toggle .btn-outline-light {
  color: var(--gray-100, #f3f3f4);
  background-color: transparent;
  border-color: var(--gray-100, #f3f3f4);
  box-shadow: 0 2px 4px rgba(0 0 0 / 50%);
  background-image: none;
}

.btn-outline-light.disabled,
.btn-outline-light.disabled:hover,
.btn-outline-light.disabled:focus,
.btn-outline-light.disabled:active,
.btn-outline-light.disabled.active,
.btn-outline-light[disabled],
.btn-outline-light[disabled]:hover,
.btn-outline-light[disabled]:focus,
.btn-outline-light[disabled]:active,
.btn-outline-light[disabled].active,
fieldset[disabled] .btn-outline-light,
fieldset[disabled] .btn-outline-light:hover,
fieldset[disabled] .btn-outline-light:focus,
fieldset[disabled] .btn-outline-light:active,
fieldset[disabled] .btn-outline-light.active {
  background-color: transparent !important;
  border-color: var(--white, #fff);
}

/* BUTTON MORE */
.btn-more {
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: var(--padding-base-vertical) var(--padding-base-horizontal);
  line-height: var(--line-height-base);
  border-radius: var(--btn-border-radius-base);
  user-select: none;
  display: block;
  width: 100%;
  background-image: none;
  background-color: #fff;
  background-color: rgba(255 255 255 / 70%);
  font-size: 1.25rem;

  &:focus {
    outline: 2px solid var(--outline-default-color);
    outline-offset: -4px;
  }

  &:focus,
  &.focus,
  &:active:focus,
  &:active.focus,
  &.active:focus,
  &.active.focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -4px;
    text-decoration: none;
    color: var(--btn-default-color, #3b3a48);
  }

  &:active,
  &.active {
    outline: 0;
    background-image: none;
  }

  .more-title {
    display: block;
  }

  .more-icon {
    font-size: 1.5rem;
  }

  &.inverse {
    background-color: #000;
    color: #fff;

    &:hover,
    &:focus {
      color: var(--color-p1, #fdb81e);
    }
  }
}

.btn-more.disabled,
.btn-more[disabled],
fieldset[disabled] .btn-more {
  cursor: var(--cursor-disabled);
  opacity: 0.65;
  filter: alpha(opacity=65);
}

@media (width <= 767px) {
  [role="group"].btn-group {
    margin-top: 10px;
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;

    > .btn,
    > .btn-group {
      float: none;
      display: table-cell;
      width: 1%;
    }

    > .btn-group .btn {
      width: 100%;
    }

    > .btn-group .dropdown-menu {
      left: auto;
    }
  }
}

@media (width <= 767px) {
  .btn-block-xs {
    display: block !important;
    width: 100% !important;
    margin-bottom: var(--spacer, 1rem) !important;
  }
}

@media (width <= 991px) {
  .btn-block-sm {
    display: block !important;
    width: 100% !important;
    margin-bottom: var(--spacer, 1rem) !important;
  }
}

.btn-row {
  .btn {
    margin-right: calc(var(--spacer, 1rem) * 0.5);
    margin-bottom: calc(var(--spacer, 1rem) * 0.5);

    @media (width <= 767px) {
      margin-bottom: calc(var(--spacer, 1rem) * 0.5);
    }
  }
}

.btn-xs {
  padding: 0.17rem 0.35rem;
  font-size: 0.85rem;
}

/* btn-hover */
.btn-hover {
  transition: color 300ms;
  position: relative;
  transform: translateZ(0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: scaleX(0);
    transform-origin: 50%;
    transition: transform 300ms ease-out;
  }

  &:hover::before {
    transform: scaleX(1);
  }
}

.btn-light.btn-hover:hover {
  background-color: var(--white, #fff);
  overflow: hidden;
}

.btn-light.btn-hover::before {
  background: var(--gray-50, #fafafa);
  overflow: hidden;
}

.btn-light.btn-hover:hover::before {
  overflow: hidden;
}

.btn-default.btn-hover:hover {
  background-color: var(--white, #fff);
  overflow: hidden;
}

.btn-default.btn-hover::before {
  background: var(--gray-50, #fafafa);
  overflow: hidden;
}

.btn-primary.btn-hover:hover {
  background-color: var(--color-p2, #046b99);
  overflow: hidden;
}

.btn-primary.btn-hover::before {
  background: var(--color-p2-darker, #214a68);
  overflow: hidden;
}

.btn-highlight.btn-hover:hover {
  background-color: var(--color-p1, #fdb81e);
  overflow: hidden;
}

.btn-highlight.btn-hover::before {
  background: var(--color-p1-light, #f2c45a);
  overflow: hidden;
}

.btn-standout.btn-hover:hover {
  background-color: var(--color-p3, #323a45);
  overflow: hidden;
}

.btn-standout.btn-hover::before {
  background: var(--color-p3-light, #525760);
  overflow: hidden;
}

.btn-secondary.btn-hover:hover {
  background-color: var(--gray-50, #fafafa);
  overflow: hidden;
}

.btn-secondary.btn-hover::before {
  background: var(--white, #fff);
  overflow: hidden;
}

.btn-outline-primary.btn-hover:hover {
  background: inherit;
  overflow: hidden;
}

.btn-outline-primary.btn-hover::before {
  background: var(--gray-50, #fafafa);
  overflow: hidden;
}

.btn-outline-standout.btn-hover:hover {
  background: inherit;
  overflow: hidden;
}

.btn-outline-standout.btn-hover::before {
  background: var(--gray-50, #fafafa);
  overflow: hidden;
}

.btn-outline-secondary.btn-hover:hover {
  background: inherit;
  overflow: hidden;
}

.btn-outline-secondary.btn-hover::before {
  background: var(--gray-50, #fafafa);
  overflow: hidden;
}

.btn-outline-highlight.btn-hover:hover {
  background: inherit;
  overflow: hidden;
}

.btn-outline-highlight.btn-hover::before {
  background: rgb(0 0 0 / 20%);
  overflow: hidden;
}

.btn-outline-light.btn-hover:hover {
  background: inherit;
  overflow: hidden;
}

.btn-outline-light.btn-hover::before {
  background: rgb(0 0 0 / 20%);
  overflow: hidden;
}

/* btn-next, prev */
.btn-next span,
.btn-prev span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-next span::after {
  content: "\39";
  font-family: CaGov;
  position: absolute;
  opacity: 0;
  top: 0;
  right: -10px;
  transition: 0.5s;
}

.btn-next:hover span {
  padding-right: 25px;

  &::after {
    opacity: 1;
    right: 0;
  }
}

.btn-prev span::before {
  content: "\38";
  font-family: CaGov;
  position: absolute;
  opacity: 0;
  top: 0;
  left: -10px;
  transition: 0.5s;
}

.btn-prev:hover span {
  padding-left: 25px;

  &::before {
    opacity: 1;
    left: 0;
  }
}

.btn-block {
  white-space: normal;
}