/* Shared navigation chevrons */
.employer-week-arrow,
.payroll-month-arrow {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-strong);
  cursor: pointer;
  appearance: none;
}

.employer-week-arrow::before,
.payroll-month-arrow::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url('/icons/Chevron_Right.svg') center / contain no-repeat;
  mask: url('/icons/Chevron_Right.svg') center / contain no-repeat;
}

.employer-week-arrow[data-week-prev]::before,
.payroll-month-arrow[data-month-step='-1']::before {
  -webkit-mask-image: url('/icons/Chevron_Left.svg');
  mask-image: url('/icons/Chevron_Left.svg');
  transform: none;
}

.employer-week-arrow:hover:not(:disabled),
.payroll-month-arrow:hover:not(:disabled) {
  background: var(--interactive-highlight);
}

.employer-week-arrow:focus-visible,
.payroll-month-arrow:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.employer-week-arrow:disabled,
.payroll-month-arrow:disabled {
  opacity: 0.45;
  cursor: wait;
}

/* Shared chevron glyph for calendar period navigation */
.period-chevron {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentColor;
  -webkit-mask: url('/icons/Chevron_Right.svg') center / contain no-repeat;
  mask: url('/icons/Chevron_Right.svg') center / contain no-repeat;
}

.period-chevron-left {
  -webkit-mask-image: url('/icons/Chevron_Left.svg');
  mask-image: url('/icons/Chevron_Left.svg');
}

/* Calendar navigation inside modals and popovers */
#modal-root .period-chevron,
.mw-date-picker .period-chevron,
.mw-calendar .period-chevron {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentColor;
}

#modal-root .period-chevron-left,
.mw-date-picker .period-chevron-left,
.mw-calendar .period-chevron-left {
  -webkit-mask-image: url('/icons/Chevron_Left.svg');
  mask-image: url('/icons/Chevron_Left.svg');
}

#modal-root .period-chevron-right,
.mw-date-picker .period-chevron-right,
.mw-calendar .period-chevron-right {
  -webkit-mask-image: url('/icons/Chevron_Right.svg');
  mask-image: url('/icons/Chevron_Right.svg');
}