/*
 * Close control on WooCommerce notices (Rental_Notice_Dismiss).
 *
 * Enqueued together with rental-notice-dismiss.js, so a page never shows the
 * control without its look. The control sits in the notice's top-right
 * corner as a small round button, and the notice keeps room for it on the
 * right.
 *
 * Themes and the checkout layout style notices, their list items and bare
 * <button> elements with their own sizes, paddings, colours, text-indent and
 * !important rules. Every property the control depends on is therefore set
 * with !important, and `:not(#rntp-notice-dismiss)` gives each selector an
 * id's weight, so a theme rule written with classes cannot outrank it.
 */

/* Positioning context. A notice a theme made fixed or absolute already is one;
   the script sets `relative` inline only on a static notice. */
.rntp-notice--dismissible {
    position: relative;
}

/* Logical sides, so a right-to-left page gets the control and the room on the left. */
.rntp-notice--dismissible:not(#rntp-notice-dismiss) {
    padding-inline-end: 48px !important;
}

/* The corner box: the list item that carries the control in an error <ul>,
   or the button itself in a <div> notice. */
.rntp-notice--dismissible > .rntp-notice-dismiss-slot:not(#rntp-notice-dismiss),
.rntp-notice--dismissible > .rntp-notice-dismiss:not(#rntp-notice-dismiss) {
    position: absolute !important;
    top: 12px !important;
    bottom: auto !important;
    inset-inline-end: 12px !important;
    inset-inline-start: auto !important;
    z-index: 2 !important;
    float: none !important;
    box-sizing: border-box !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

.rntp-notice--dismissible > .rntp-notice-dismiss-slot:not(#rntp-notice-dismiss) {
    display: block !important;
    border: 0 !important;
    background: none !important;
    list-style: none !important;
    line-height: 0 !important;
    text-indent: 0 !important;
}

/* Bullets and icons themes draw on notice list items. */
.rntp-notice--dismissible > .rntp-notice-dismiss-slot:not(#rntp-notice-dismiss)::before,
.rntp-notice--dismissible > .rntp-notice-dismiss-slot:not(#rntp-notice-dismiss)::after,
.rntp-notice--dismissible .rntp-notice-dismiss:not(#rntp-notice-dismiss)::before,
.rntp-notice--dismissible .rntp-notice-dismiss:not(#rntp-notice-dismiss)::after {
    content: none !important;
    display: none !important;
}

/* Inside the slot the button fills it. */
.rntp-notice--dismissible > .rntp-notice-dismiss-slot > .rntp-notice-dismiss:not(#rntp-notice-dismiss) {
    position: static !important;
    float: none !important;
    margin: 0 !important;
    transform: none !important;
}

.rntp-notice--dismissible .rntp-notice-dismiss:not(#rntp-notice-dismiss) {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    opacity: 0.6 !important;
    cursor: pointer !important;
    transition: opacity 150ms ease-in-out, background-color 150ms ease-in-out !important;
}

.rntp-notice--dismissible .rntp-notice-dismiss:not(#rntp-notice-dismiss):hover,
.rntp-notice--dismissible .rntp-notice-dismiss:not(#rntp-notice-dismiss):focus-visible {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.08) !important;
}

.rntp-notice--dismissible .rntp-notice-dismiss:not(#rntp-notice-dismiss):focus {
    outline: none !important;
}

.rntp-notice--dismissible .rntp-notice-dismiss:not(#rntp-notice-dismiss):focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 1px !important;
}

@media (prefers-reduced-motion: reduce) {
    .rntp-notice--dismissible .rntp-notice-dismiss:not(#rntp-notice-dismiss) {
        transition: none !important;
    }
}