/* ---------------------------------------------------------------------------
   A SEGMENTED SWITCH standing in for a <select> with a handful of options.

   Used for "Otvori u" in Trumbowyg's link dialog (public/js/trumbowygInit.js)
   and for the notice "Tip" on Podesavanja (public/js/main.js). In both cases
   the <select> is still there and is still what gets read or posted - this
   only covers it up, so nothing depends on the switch existing.

   Every option is visible without opening anything and choosing one is a
   single click. The selected one is filled in; the others are not.
   --------------------------------------------------------------------------- */

/* flex, not display:table - a <button> does not stay a table-cell, the browser
   wraps each one into a row of its own and the two ended up stacked. */
.pkSwitch {
    display: flex;
    width: 100%;
    height: 32px;
}

.pkSwitch button {
    flex: 1 1 0;
    display: block;
    height: 32px;
    line-height: 32px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #69878f;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
}

.pkSwitch button + button {
    border-left: 1px solid #dedede;
}

/* HOVER HAS TO BE STATED, or the application's own `form button:hover` takes
   it: that selector is more specific than `.pkSwitch button` and would paint
   an UNSELECTED segment brown - the colour that means "this is the chosen
   one" - for as long as the pointer was over it. Only the background moved,
   because the text colour rule here still won, which is what made it read as
   a half-selected button. */
.pkSwitch button:hover,
.pkSwitch button:focus {
    background: #f2f0ef;
    color: #4a4340;
}

/* The selected segment keeps its colour on hover without a rule of its own:
   `.pkSwitch button.isActive` is the same specificity as the hover above and
   is written after it, and the --notice variants are more specific still. */

/* NO JUMPING WHEN THE SELECTION MOVES.

   The selected segment is bold, and bold text is wider, so every press
   resized one button and shoved its neighbours sideways. Each button
   therefore reserves the width of its OWN label AT BOLD, always - an
   invisible zero-height copy sets the width, and the real label sits over it.
   Nothing changes size when isActive moves; only the colour does. */
.pkSwitch button::after {
    content: attr(data-label);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 600;
}

/* The brand brown, the same #2f1f1a that `form button` and `.btn` use. The
   green this started as was Trumbowyg's, inherited from the dialog the first
   switch happened to be built in, and it is not a colour used anywhere else
   in this application. */
.pkSwitch button.isActive {
    background: #2f1f1a;
    color: #fff;
    font-weight: 600;
}

/* Inside Trumbowyg's link dialog the row it sits in already draws the frame.
   Standing on its own in a form it needs one of its own, or it reads as three
   words floating next to the label. */
.pkSwitch--framed {
    display: inline-flex;
    width: auto;
    border: 1px solid #cfcfcf;
    border-radius: 3px;
    overflow: hidden;
}

.pkSwitch--framed button {
    padding: 0 1.2rem;
    white-space: nowrap;
}

/* --- the notice "Tip" -------------------------------------------------------
   The selected segment carries the colour of the banner it selects, taken from
   public/css/notice.css so the two cannot drift: choosing "Upozorenje (žuto)"
   should show yellow, not a brown button with the word yellow written on it.
   The brand brown is right for a switch whose options have no colour of their
   own; here the options ARE colours.
   --------------------------------------------------------------------------- */

.pkSwitch--notice button.isActive[data-value="info"]    { background: #d9edf7; color: #21506b; }
.pkSwitch--notice button.isActive[data-value="warning"] { background: #fcf1c8; color: #6b5310; }
.pkSwitch--notice button.isActive[data-value="danger"]  { background: #f2b8b5; color: #6b1a15; }

/* --- a checkbox as an on/off switch -----------------------------------------
   Built by toggleify() in public/js/main.js over the real checkbox, which is
   hidden but still the field that posts. It is a .pkSwitch like the others;
   only its two labels are written by the script, because which word belongs on
   which side depends on whether it is on.

   Fixed width, because those labels change with the state ("Aktivno" /
   "Uključi") and the control should not resize as it is used.
   --------------------------------------------------------------------------- */

.pkSwitch--toggle {
    width: 22rem;
}

.pkSwitch--toggle button {
    flex: 1 1 50%;
}

/* the state, not a colour being chosen: the brand brown, as before */
.pkSwitch--toggle .pkToggleOn.isActive {
    background: #2f1f1a;
    color: #fff;
}

/* off is a state too, not a warning - grey rather than red */
.pkSwitch--toggle .pkToggleOff.isActive {
    background: #6f6663;
    color: #fff;
}

/* while the on/off switch is saving */
.pkSwitch.isBusy { opacity: .6; }

/* said when the banner is forced by PROTEKAL_BANNER_TEXT and the flag cannot
   turn it off - better than a switch that looks like it did nothing */
.pkToggleNote {
    display: block;
    margin-top: .4rem;
    font-size: 1.2rem;
    color: #7a1c15;
}