/*
 * Styling for the shared rotate dialog (utilities/rotate_dialog.html and the
 * archive's client-mounted rotate_dialog_nav.html), see utilities/js/rotate.js
 *
 * Each orientation is a button wrapping its own preview, so the image itself is
 * the target - comfortable under a finger, where the old separate buttons were
 * not. The three used to sit in a table of fixed 180 px cells, which needs
 * 588 px and cannot wrap, so on a phone the third one was simply cut off.
 */

.rotate_options {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.8em;
   margin: 0.8em 0 1.2em;
}

.rotate_option {
   /* Phone: fluid, so three fit across the full-screen dialog */
   flex: 1 1 110px;
   max-width: 190px;
   padding: 6px;
   border: 1px solid #ccc;
   border-radius: 4px;
   background: #fafafa;
   cursor: pointer;
   font: inherit;
   text-align: center;
   /* No double-tap-to-zoom delay on the image */
   touch-action: manipulation;
}

/*
 * From the same breakpoint the modal itself uses (see #my_modal in style.css):
 * the dialog is width: fit-content from here up, and a flexible basis has no
 * intrinsic width to offer it, which would collapse the row to one option per
 * line. A definite width gives fit-content something to measure.
 */
@media (min-width: 35.5em) {
   .rotate_option {
      flex: 0 0 190px;
   }
}

.rotate_option:hover,
.rotate_option:focus-visible {
   border-color: #888;
   background: #f0f0f0;
}

.rotate_option:active {
   background: #e2e2e2;
}

/*
 * Square and fluid: a landscape photo turned 90 degrees needs its long side to
 * fit the box's short side, which is what the 78% cap is for (the fixed layout
 * capped a 140 px image inside a 180 px frame for the same reason).
 */
.rotate_frame {
   display: flex;
   width: 100%;
   aspect-ratio: 1;
   overflow: hidden;
   align-items: center;
   justify-content: center;
}

.rotate_frame img {
   max-width: 78%;
   max-height: 78%;
}

.rotate_angle {
   display: block;
   margin-top: 4px;
   color: #333;
}

/* vim: set nowrap sw=3 sts=3 et fdm=marker: */