/**
 * Atomic Addons — Subscriptions (storefront).
 *
 * This extension shipped without any frontend stylesheet: wsub-admin.css is
 * enqueued only on the subscription edit screen, so everything a customer saw —
 * the My Account tab, the subscription detail view, the cancel form, the price
 * suffix, the cart summary — fell back to whatever the active theme happened to
 * do. Next to the compare and wishlist tables, which are bordered cards with
 * status pills, it read as a different plugin.
 *
 * Everything here is built from the shared tokens, so it matches those tables
 * rather than approximating them.
 */

/* --- Status badge -------------------------------------------------------
   A subscription has six states, and the customer needs to tell them apart at
   a glance. Colour alone is not enough, so each badge also carries its own
   label text and a dot; the modifier class is the status slug. */

.atomel-wsub-status {
	display: inline-flex;
	align-items: center;
	gap: var(--aea-wc-space-2);
	padding: var(--aea-wc-space-1) var(--aea-wc-space-2);
	border: 1px solid var(--aea-wc-border);
	border-radius: var(--aea-wc-radius-pill);
	background: var(--aea-wc-surface-muted);
	color: var(--aea-wc-text-muted);
	font-size: var(--aea-wc-text-xs);
	font-weight: var(--aea-wc-weight-semibold);
	line-height: 1.4;
	white-space: nowrap;
}

.atomel-wsub-status::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: var(--aea-wc-radius-pill);
	background: currentColor;
}

.atomel-wsub-status--active {
	border-color: var(--aea-wc-success-border);
	background: var(--aea-wc-success-surface);
	color: var(--aea-wc-success);
}

.atomel-wsub-status--past-due {
	border-color: var(--aea-wc-danger-border);
	background: var(--aea-wc-danger-surface);
	color: var(--aea-wc-danger);
}

.atomel-wsub-status--on-hold,
.atomel-wsub-status--pending {
	border-color: var(--aea-wc-warning-border);
	background: var(--aea-wc-warning-surface);
	color: var(--aea-wc-warning);
}

/* Finished states stay neutral — they are not a problem to solve, just over. */
.atomel-wsub-status--cancelled,
.atomel-wsub-status--expired {
	border-color: var(--aea-wc-border);
	background: var(--aea-wc-surface-muted);
	color: var(--aea-wc-text-subtle);
}

/* --- Buttons ------------------------------------------------------------
   Same metrics as the shared control layer, so a subscription button and a
   wishlist button on the same account page are the same object. */

.atomel-wsub-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--aea-wc-space-2);
	box-sizing: border-box;
	min-height: var(--aea-wc-control-height);
	padding: 0 var(--aea-wc-control-padding-x);
	border: 1px solid var(--aea-wc-border);
	border-radius: var(--aea-wc-radius-md);
	background: var(--aea-wc-surface);
	color: var(--aea-wc-text-muted);
	font-size: var(--aea-wc-text-base);
	font-weight: var(--aea-wc-weight-medium);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--aea-wc-transition), border-color var(--aea-wc-transition),
		background-color var(--aea-wc-transition);
}

.atomel-wsub-btn:hover {
	border-color: var(--aea-wc-border-strong);
	background: var(--aea-wc-surface-subtle);
	color: var(--aea-wc-text);
}

.atomel-wsub-btn:focus-visible {
	outline: none;
	border-color: var(--aea-wc-accent);
	box-shadow: var(--aea-wc-focus-ring);
}

/* A filled button is the page's main action, so it carries the shared primary's
   type as well as its fill — the box alone left the highest-stakes control on
   the screen lighter than the outline buttons beside it. */
.atomel-wsub-btn--primary {
	border-color: var(--aea-wc-accent);
	background: var(--aea-wc-accent);
	color: var(--aea-wc-accent-contrast);
	font-size: var(--aea-wc-text-md);
	font-weight: var(--aea-wc-weight-semibold);
}

.atomel-wsub-btn--primary:hover {
	border-color: var(--aea-wc-accent-hover);
	background: var(--aea-wc-accent-hover);
	color: var(--aea-wc-accent-contrast);
}

/* Destructive, so it reads as destructive before it is pressed — but quietly,
   as an outline rather than a block of red. */
.atomel-wsub-btn--danger {
	border-color: var(--aea-wc-danger-border);
	background: var(--aea-wc-surface);
	color: var(--aea-wc-danger);
}

.atomel-wsub-btn--danger:hover {
	border-color: var(--aea-wc-danger);
	background: var(--aea-wc-danger-surface);
	color: var(--aea-wc-danger);
}

/* --- Account list table -------------------------------------------------
   The same bordered card the compare and wishlist tables use. */

.atomel-wsub-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--aea-wc-border);
	border-radius: var(--aea-wc-radius-lg);
	background: var(--aea-wc-surface);
}

.atomel-wsub-table.atomel-wsub-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-spacing: 0;
	border-collapse: separate;
	font-size: var(--aea-wc-text-md);
}

.atomel-wsub-table th,
.atomel-wsub-table td {
	padding: var(--aea-wc-space-3) var(--aea-wc-space-4);
	border: 0;
	border-bottom: 1px solid var(--aea-wc-border);
	text-align: start;
	vertical-align: middle;
}

.atomel-wsub-table thead th {
	background: var(--aea-wc-surface-subtle);
	color: var(--aea-wc-text-subtle);
	font-size: var(--aea-wc-text-xs);
	font-weight: var(--aea-wc-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.atomel-wsub-table tbody tr:last-child td {
	border-bottom: 0;
}

.atomel-wsub-table tbody tr:hover td {
	background: var(--aea-wc-surface-subtle);
}

/* Scoped through the table so it outranks the theme's own account-content link
   styling, which underlines every link in this region by default. */
.atomel-wsub-table .atomel-wsub-row__name {
	color: var(--aea-wc-text);
	font-weight: var(--aea-wc-weight-medium);
	text-decoration: none;
}

.atomel-wsub-table .atomel-wsub-row__name:hover {
	text-decoration: underline;
}

/* Name above order reference. A column, so the pair stays one flex child in the
   stacked layout below — where the cell itself becomes a flex row and would
   otherwise spread the label, the link and the reference across one line. */
.atomel-wsub-row__id {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--aea-wc-space-1);
}

/* Which order this came from. It disambiguates two subscriptions to the same
   product, so it is secondary to the name rather than beside it in weight. */
.atomel-wsub-row__ref {
	color: var(--aea-wc-text-subtle);
	font-size: var(--aea-wc-text-sm);
	line-height: var(--aea-wc-leading);
}

.atomel-wsub-col-actions {
	width: 1%;
	text-align: end;
	white-space: nowrap;
}

.atomel-wsub-muted {
	color: var(--aea-wc-text-faint);
}

/* --- Pagination ----------------------------------------------------------
   Prev and next at the outer edges with the page position between them. The
   two links are already `.atomel-wsub-btn`, so nothing about the controls is
   redefined here — only where they sit. */

.atomel-wsub-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--aea-wc-space-3);
	margin-top: var(--aea-wc-space-5);
}

/* Either link can be absent on the first and last page, so the status grows to
   fill the row rather than relying on a button to hold the other edge — it stays
   centred when it is the only thing beside one button. */
.atomel-wsub-pagination__status {
	flex: 1 1 auto;
	color: var(--aea-wc-text-subtle);
	font-size: var(--aea-wc-text-base);
	text-align: center;
}

/* A direction affordance that is drawn rather than written, so it adds nothing
   to the link's accessible name — "Previous" already says which way it goes.
   The same 6px box as the status dot and the cancel caret, and a flex child of
   the button, so the button's own gap spaces it. */
.atomel-wsub-pagination__link--prev::before,
.atomel-wsub-pagination__link--next::after {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
}

.atomel-wsub-pagination__link--prev::before {
	transform: rotate(-135deg);
}

.atomel-wsub-pagination__link--next::after {
	transform: rotate(45deg);
}

/* --- Detail view --------------------------------------------------------- */

.atomel-wsub-back {
	display: inline-flex;
	align-items: center;
	gap: var(--aea-wc-space-2);
	margin-bottom: var(--aea-wc-space-4);
	color: var(--aea-wc-text-subtle);
	font-size: var(--aea-wc-text-base);
	text-decoration: none;
}

.atomel-wsub-back:hover {
	color: var(--aea-wc-text);
	text-decoration: underline;
}

/* Same reason as the row name above: the account content area underlines links. */
.atomel-wsub-view-subscription .atomel-wsub-back,
.atomel-wsub-table .atomel-wsub-btn,
.atomel-wsub-view-subscription .atomel-wsub-btn,
.atomel-wsub-pagination .atomel-wsub-btn {
	text-decoration: none;
}

.atomel-wsub-panel {
	padding: var(--aea-wc-space-5);
	border: 1px solid var(--aea-wc-border);
	border-radius: var(--aea-wc-radius-lg);
	background: var(--aea-wc-surface);
}

.atomel-wsub-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--aea-wc-space-3);
	padding-bottom: var(--aea-wc-space-4);
	border-bottom: 1px solid var(--aea-wc-border);
}

.atomel-wsub-panel__title {
	margin: 0;
	font-size: var(--aea-wc-text-lg);
	font-weight: var(--aea-wc-weight-semibold);
	line-height: var(--aea-wc-leading-tight);
	color: var(--aea-wc-text);
}

/* Label above value, so a long date never collides with its label. */
.atomel-wsub-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--aea-wc-space-4);
	margin: var(--aea-wc-space-4) 0 0;
	padding: 0;
}

.atomel-wsub-fact {
	margin: 0;
}

.atomel-wsub-fact__label {
	margin: 0 0 var(--aea-wc-space-1);
	font-size: var(--aea-wc-text-xs);
	font-weight: var(--aea-wc-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aea-wc-text-subtle);
}

.atomel-wsub-fact__value {
	margin: 0;
	font-size: var(--aea-wc-text-md);
	font-weight: var(--aea-wc-weight-medium);
	color: var(--aea-wc-text);
}

.atomel-wsub-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--aea-wc-space-3);
	margin: var(--aea-wc-space-4) 0 0;
	padding: var(--aea-wc-space-3) var(--aea-wc-space-4);
	border: 1px solid var(--aea-wc-border);
	border-radius: var(--aea-wc-radius-md);
	background: var(--aea-wc-surface-subtle);
}

.atomel-wsub-notice--warning {
	border-color: var(--aea-wc-warning-border);
	background: var(--aea-wc-warning-surface);
}

.atomel-wsub-notice__text {
	flex: 1 1 220px;
	margin: 0;
	font-size: var(--aea-wc-text-md);
	color: var(--aea-wc-text);
}

/* The separator belongs to the disclosure, not to the form inside it. The form
   is only in flow once the summary is open, so keeping the rule on the form
   would draw a line under the summary instead of above the whole section. */
.atomel-wsub-cancel {
	margin: var(--aea-wc-space-5) 0 0;
	padding-top: var(--aea-wc-space-4);
	border-top: 1px solid var(--aea-wc-border);
}

/* At rest this is only a line of text: the weight of the action belongs to the
   danger button it reveals, not to the thing that reveals it. */
.atomel-wsub-cancel__summary {
	display: inline-flex;
	align-items: center;
	gap: var(--aea-wc-space-2);
	color: var(--aea-wc-danger);
	font-size: var(--aea-wc-text-base);
	font-weight: var(--aea-wc-weight-medium);
	list-style: none;
	cursor: pointer;
}

/* Safari draws its marker from a shadow pseudo-element, not from list-style. */
.atomel-wsub-cancel__summary::-webkit-details-marker {
	display: none;
}

/* Replaced with our own caret, at the same 6px as the status dot. */
.atomel-wsub-cancel__summary::after {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--aea-wc-transition);
}

.atomel-wsub-cancel[open] .atomel-wsub-cancel__summary::after {
	transform: translateY(1px) rotate(-135deg);
}

/* This is now the keyboard entry point to a destructive action, so it carries
   the same ring the buttons do. The radius exists only to shape that ring —
   there is no box to round when the summary is not focused. */
.atomel-wsub-cancel__summary:focus-visible {
	outline: none;
	border-radius: var(--aea-wc-radius-sm);
	box-shadow: var(--aea-wc-focus-ring);
}

.atomel-wsub-cancel-form {
	margin: var(--aea-wc-space-3) 0 0;
}

.atomel-wsub-cancel-form__hint {
	margin: var(--aea-wc-space-2) 0 0;
	font-size: var(--aea-wc-text-base);
	line-height: var(--aea-wc-leading);
	color: var(--aea-wc-text-subtle);
}

/* --- Empty state ---------------------------------------------------------
   Dashed, because that is already the plugin's signal for "this region is
   empty" — the wishlist and compare tabs next door use the same outline, and a
   solid border here would read as a populated card with nothing in it. */

.atomel-wsub-empty {
	padding: var(--aea-wc-space-8) var(--aea-wc-space-5);
	border: 1px dashed var(--aea-wc-border-strong);
	border-radius: var(--aea-wc-radius-lg);
	background: var(--aea-wc-surface-subtle);
	text-align: center;
}

.atomel-wsub-empty__title {
	margin: 0 0 var(--aea-wc-space-1);
	font-size: var(--aea-wc-text-md);
	font-weight: var(--aea-wc-weight-semibold);
	color: var(--aea-wc-text);
}

.atomel-wsub-empty__text {
	margin: 0;
	font-size: var(--aea-wc-text-base);
	line-height: var(--aea-wc-leading);
	color: var(--aea-wc-text-subtle);
}

/* The way out of the empty state. It inherits the block's centring, so only the
   gap that separates it from the explanation above is set here. */
.atomel-wsub-empty__action {
	margin: var(--aea-wc-space-5) 0 0;
}

/* --- Product page and cart -----------------------------------------------

   The product notice is emitted with WooCommerce's `woocommerce-info` class so
   it still degrades sensibly, but it is styled here to match the notice in the
   account view rather than wearing the theme's blue info banner. Scoped to our
   own class so other WooCommerce notices on the page are untouched — the same
   approach Min/Max Quantities takes with its own notices. */

.woocommerce .atomel-wsub-product-notice,
.atomel-wsub-product-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--aea-wc-space-3);
	margin: 0 0 var(--aea-wc-space-4);
	padding: var(--aea-wc-space-3) var(--aea-wc-space-4);
	border: 1px solid var(--aea-wc-border);
	border-top-color: var(--aea-wc-border);
	border-radius: var(--aea-wc-radius-md);
	background: var(--aea-wc-surface-subtle);
	color: var(--aea-wc-text-muted);
	font-size: var(--aea-wc-text-md);
	line-height: var(--aea-wc-leading);
}

/* WooCommerce draws an icon into the notice with a pseudo-element; it belongs
   to the theme's banner, not to this one. */
.woocommerce .atomel-wsub-product-notice::before,
.atomel-wsub-product-notice::before {
	display: none;
}



/* "every month" after the price. Lighter than the price so it reads as a
   qualifier rather than part of the number. */
.atomel-wsub-price-suffix {
	color: var(--aea-wc-text-subtle);
	font-size: 0.85em;
	font-weight: var(--aea-wc-weight-normal);
	white-space: nowrap;
}

/* These are rows inside WooCommerce's own totals table, not a card floating
   next to it: padding, margin and radius do not render on a `tr` at all, and
   laying the row out with flex would take it out of the table and stop its
   columns lining up with Subtotal and Total above. So the row stays a row, and
   the section is marked by a rule above its heading cell instead — the same
   micro-label the account table uses for its column headers. */

.atomel-wsub-recurring-summary,
.atomel-wsub-recurring-summary-row {
	font-size: var(--aea-wc-text-base);
}

/* Doubled up throughout this block: the cells sit in a `shop_table`, which
   themes style by element, and a single class would lose to `.shop_table th`. */
.atomel-wsub-recurring-summary .atomel-wsub-recurring-summary__heading {
	padding-top: var(--aea-wc-space-3);
	border-top: 1px solid var(--aea-wc-border);
	color: var(--aea-wc-text-subtle);
	font-size: var(--aea-wc-text-xs);
	font-weight: var(--aea-wc-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: start;
}

.atomel-wsub-recurring-summary-row .atomel-wsub-recurring-summary-row__name {
	color: var(--aea-wc-text-soft);
	font-weight: var(--aea-wc-weight-normal);
	text-align: start;
}

.atomel-wsub-recurring-summary-row .atomel-wsub-recurring-summary-row__value {
	color: var(--aea-wc-text);
	text-align: end;
}

/* Tabular figures so the amounts line up down the column instead of drifting
   with the width of each digit. */
.atomel-wsub-recurring-summary-row__amount {
	display: block;
	font-weight: var(--aea-wc-weight-medium);
	font-variant-numeric: tabular-nums;
}

/* Trial and sign-up-fee notes: qualifiers on the amount, so they sit under it
   rather than competing with it. */
.atomel-wsub-recurring-summary-note {
	display: block;
	margin-top: var(--aea-wc-space-1);
	color: var(--aea-wc-text-subtle);
	font-size: var(--aea-wc-text-xs);
	font-weight: var(--aea-wc-weight-normal);
}

/* The block Cart and Checkout have no totals table to add rows to, so the same
   information arrives as a panel appended after the block. It is a card here
   precisely because it is no longer part of a table. */

.atomel-wsub-recurring-panel {
	margin-top: var(--aea-wc-space-6);
	padding: var(--aea-wc-space-4);
	border: 1px solid var(--aea-wc-border);
	/* A panel, not a control: the same cut as the account card a customer sees
	   one click earlier. */
	border-radius: var(--aea-wc-radius-lg);
	background: var(--aea-wc-surface-subtle);
	font-size: var(--aea-wc-text-base);
}

.atomel-wsub-recurring-panel .atomel-wsub-recurring-panel__title {
	margin: 0 0 var(--aea-wc-space-3);
	color: var(--aea-wc-text-subtle);
	font-size: var(--aea-wc-text-xs);
	font-weight: var(--aea-wc-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.atomel-wsub-recurring-panel__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.atomel-wsub-recurring-panel__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--aea-wc-space-2);
}

.atomel-wsub-recurring-panel__item + .atomel-wsub-recurring-panel__item {
	margin-top: var(--aea-wc-space-2);
}

.atomel-wsub-recurring-panel__name {
	color: var(--aea-wc-text-soft);
}

.atomel-wsub-recurring-panel__value {
	color: var(--aea-wc-text);
	font-weight: var(--aea-wc-weight-medium);
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* A note takes the whole next line rather than squeezing in between the name
   and the amount, which is where flex-wrap would otherwise put it. */
.atomel-wsub-recurring-panel__note {
	flex-basis: 100%;
	color: var(--aea-wc-text-subtle);
	font-size: var(--aea-wc-text-xs);
}

/* --- Visually hidden text -------------------------------------------------
   The templates lean on `screen-reader-text` for the table caption, the header
   of the button-only column, and the text equivalent beside the em dash. Both
   core and WooCommerce define that class, but a theme that dequeues the
   WooCommerce stylesheet and does not declare it itself would print all of it
   on screen. Scoped to our own wrappers, so it cannot reach anything else, and
   using the same clip as the shared control layer. */

.atomel-wsub-table-wrap .screen-reader-text,
.atomel-wsub-view-subscription .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Responsive ----------------------------------------------------------
   WooCommerce's shop_table_responsive stacks cells and labels them from
   data-title. The template now emits those, so the stacked rows read as
   label/value pairs instead of four unlabelled lines. */

@media (max-width: 767px) {
	.atomel-wsub-table-wrap {
		overflow-x: visible;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.atomel-wsub-table thead {
		display: none;
	}

	.atomel-wsub-table,
	.atomel-wsub-table tbody,
	.atomel-wsub-table tr,
	.atomel-wsub-table td {
		display: block;
		width: auto;
	}

	.atomel-wsub-table tbody tr {
		margin-bottom: var(--aea-wc-space-3);
		padding: var(--aea-wc-space-4);
		border: 1px solid var(--aea-wc-border);
		border-radius: var(--aea-wc-radius-lg);
		background: var(--aea-wc-surface);
	}

	.atomel-wsub-table tbody tr:last-child {
		margin-bottom: 0;
	}

	.atomel-wsub-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--aea-wc-space-4);
		padding: var(--aea-wc-space-2) 0;
		border-bottom: 0;
		text-align: end;
	}

	.atomel-wsub-table td::before {
		content: attr(data-title);
		flex: 0 0 auto;
		color: var(--aea-wc-text-subtle);
		font-size: var(--aea-wc-text-xs);
		font-weight: var(--aea-wc-weight-semibold);
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-align: start;
	}

	/* The cell is a label/value row now, with the value at the end of it, so the
	   name and its order reference hug that edge the way every other value does.
	   Flex `start`/`end` follow the text direction, so RTL needs nothing here. */
	.atomel-wsub-row__id {
		align-items: flex-end;
		text-align: end;
	}

	/* The actions cell gets a full-width button rather than a label/value pair. */
	.atomel-wsub-table td.atomel-wsub-col-actions {
		justify-content: stretch;
		width: auto;
		margin-top: var(--aea-wc-space-2);
		padding-top: var(--aea-wc-space-3);
		border-top: 1px solid var(--aea-wc-border);
	}

	.atomel-wsub-table td.atomel-wsub-col-actions::before {
		display: none;
	}

	.atomel-wsub-table td.atomel-wsub-col-actions .atomel-wsub-btn {
		flex: 1 1 auto;
	}

	/* Two full-size controls and a page count rarely fit on one line here, and
	   a wrapped row pushed to one edge reads as a stray button. */
	.atomel-wsub-pagination {
		justify-content: center;
	}

	.atomel-wsub-panel {
		padding: var(--aea-wc-space-4);
	}

	/* A single call to action in a narrow column is easier to hit at full width
	   than centred at its own size. */
	.atomel-wsub-cancel-form .atomel-wsub-btn,
	.atomel-wsub-empty__action .atomel-wsub-btn {
		width: 100%;
	}
}

/* WooCommerce stacks its own `shop_table_responsive` at 768px — one pixel wider
   than the breakpoint above — and hides every `tbody th` when it does, which
   would take the Recurring heading with it. The product-name `th` is fine to
   lose: its value cell carries the name in `data-title`, which is what core
   prints as the stacked row's label. */

@media (max-width: 768px) {
	.atomel-wsub-recurring-summary .atomel-wsub-recurring-summary__heading {
		display: table-cell;
	}
}

/* --- Right-to-left -------------------------------------------------------- */

.rtl .atomel-wsub-back__arrow {
	transform: scaleX(-1);
}

/* The pager itself is laid out with flex `space-between`, which already follows
   the text direction; only the drawn chevrons have a fixed angle, so they are
   the one thing that has to be turned around. */
.rtl .atomel-wsub-pagination__link--prev::before {
	transform: rotate(45deg);
}

.rtl .atomel-wsub-pagination__link--next::after {
	transform: rotate(-135deg);
}