/*
 * CHESTER WINDOWS
 * EXISTING FORWARD INDICATOR STANDARD
 *
 * This class is applied ONLY where an existing forward
 * arrow / chevron has been replaced.
 *
 * It must never be used to introduce a new indicator to
 * a control which previously had none.
 */

.cw-forward-icon {
  display: inline-block !important;

  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;

  flex: 0 0 28px !important;

  margin-left: 8px !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    transparent
    url("assets/ui/next-action.png")
    center / contain
    no-repeat !important;

  color: transparent !important;

  font-size: 0 !important;
  line-height: 0 !important;

  vertical-align: middle !important;

  box-shadow: none !important;

  filter:
    drop-shadow(
      0 2px 4px rgba(0,0,0,.20)
    );

  transition:
    transform .14s ease,
    filter .14s ease,
    opacity .14s ease;
}


/*
 * Neutralise any old CSS-built circle / chevron
 * attached to the element we have explicitly replaced.
 */

.cw-forward-icon::before,
.cw-forward-icon::after {
  content: none !important;

  display: none !important;
}


/* Smaller treatment for inline CTA links */

a .cw-forward-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;

  flex-basis: 24px !important;

  margin-left: 6px !important;
}


/* Standard button treatment */

button .cw-forward-icon,
[role="button"] .cw-forward-icon {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;

  flex-basis: 30px !important;
}


/* Designer final-action cards */

.final-action-arrow.cw-forward-icon {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;

  flex: 0 0 34px !important;

  margin-left: auto !important;
}


button:disabled .cw-forward-icon,
[aria-disabled="true"] .cw-forward-icon {
  opacity: .36 !important;

  filter: none !important;
}


a:hover .cw-forward-icon,
button:hover:not(:disabled) .cw-forward-icon,
[role="button"]:hover .cw-forward-icon {
  transform:
    translateX(1px)
    scale(1.04);

  filter:
    drop-shadow(
      0 3px 5px rgba(0,0,0,.24)
    );
}


@media (max-width: 700px) {

  .cw-forward-icon {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;

    flex-basis: 26px !important;
  }

  a .cw-forward-icon {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;

    flex-basis: 22px !important;
  }

  button .cw-forward-icon,
  [role="button"] .cw-forward-icon {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;

    flex-basis: 28px !important;
  }
}