/**
 * Decorate elements with borders, shadows, opacity adjustments, and more.
 *
 * @section Theming
*/

/**
 * Add borders to an element.
 *
 * @section Borders
 * @memberof Theming
 */

/**
 * Add a `1px` border that is the same color as the element's text. Target sides with `*-t`, `*-r`, `*-b`, and `*-l`. Class set includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * @group
 * @memberof Borders
 * @example
 * <div class='border'>border</div>
 * <div class='mt12 border-b'>border-b</div>
 */
.border {
  border-style: solid;
  border-width: 1px;
}
.border-t {
  border-style: solid;
  border-top-width: 1px;
}
.border-r {
  border-style: solid;
  border-right-width: 1px;
}
.border-b {
  border-style: solid;
  border-bottom-width: 1px;
}
.border-l {
  border-style: solid;
  border-left-width: 1px;
}
/** @endgroup */

/**
 *Make a border zero pixels wide. Class set includes `*-mm`, `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * @group
 * @memberof Borders
 * @example
 * <div class='border border-r--0'>border-r--0</div>
 */
.border--0 { border-width: 0 !important; }
.border-t--0 { border-top-width: 0 !important; }
.border-r--0 { border-right-width: 0 !important; }
.border-b--0 { border-bottom-width: 0 !important; }
.border-l--0 { border-left-width: 0 !important; }
/** @endgroup */

/**
 *Make a border two pixels wide.
 *
 * @group
 * @memberof Borders
 * @example
 * <div class='border border--2'>border--2</div>
 */
.border--2 { border-width: 2px !important; }
.border-t--2 { border-top-width: 2px !important; }
.border-r--2 { border-right-width: 2px !important; }
.border-b--2 { border-bottom-width: 2px !important; }
.border-l--2 { border-left-width: 2px !important; }
/** @endgroup */

/**
 *Make a border dashed instead of solid.
 *
 * @memberof Borders
 * @example
 * <div class='border border--dash'>border--dash</div>
 */
.border--dash { border-style: dashed !important; }

/**
 * Adjust the curve of an element's corners. All border classes include `*-mm`,
 * `*-ml`, and `*-mxl` variations to target screen sizes.
 *
 * @memberof Theming
 * @section Border radius
 */

/**
 * Round the corners of elements. Target sides with `*-t`, `*-r`, `*-b`, `*-l`.
 * Target corners with `*-tl`, `*-tr`, `*-bl`, `*-br`.
 *
 *
 * @group
 * @memberof Border radius
 * @example
 * <div class='bg-blue inline-block round'>round</div>
 * <div class='bg-blue inline-block ml6 round-tr'>round-tr</div>
 */
.round { border-radius: var(--border-radius) !important; }
.round-t { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
.round-r { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
.round-b { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
.round-l { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
.round-tl { border-top-left-radius: var(--border-radius) !important; }
.round-tr { border-top-right-radius: var(--border-radius) !important; }
.round-br { border-bottom-right-radius: var(--border-radius) !important; }
.round-bl { border-bottom-left-radius: var(--border-radius) !important; }
/** @endgroup */

/**
 * Like `round`, but with twice the border radius.
 *
 * @group
 * @memberof Border radius
 * @example
 * <div class='bg-blue inline-block round-bold'>round-bold</div>
 * <div class='bg-blue inline-block ml6 round-tr-bold'>round-tr-bold</div>
 */
.round-bold { border-radius: var(--border-radius-bold) !important; }
.round-t-bold { border-radius: var(--border-radius-bold) var(--border-radius-bold) 0 0 !important; }
.round-r-bold { border-radius: 0 var(--border-radius-bold) var(--border-radius-bold) 0 !important; }
.round-b-bold { border-radius: 0 0 var(--border-radius-bold) var(--border-radius-bold) !important; }
.round-l-bold { border-radius: var(--border-radius-bold) 0 0 var(--border-radius-bold) !important; }
.round-tl-bold { border-top-left-radius: var(--border-radius-bold) !important; }
.round-tr-bold { border-top-right-radius: var(--border-radius-bold) !important; }
.round-br-bold { border-bottom-right-radius: var(--border-radius-bold) !important; }
.round-bl-bold { border-bottom-left-radius: var(--border-radius-bold) !important; }
/** @endgroup */

/**
 * Like `round`, but with fully round corners.
 *
 * @group
 * @memberof Border radius
 * @example
 * <div class='bg-blue inline-block round-full'>round-full</div>
 * <div class='bg-blue inline-block ml6 round-tr-full'>round-tr-full</div>
 */
.round-full { border-radius: var(--border-radius-full) !important; }
.round-t-full { border-radius: var(--border-radius-full) var(--border-radius-full) 0 0 !important; }
.round-r-full { border-radius: 0 var(--border-radius-full) var(--border-radius-full) 0 !important; }
.round-b-full { border-radius: 0 0 var(--border-radius-full) var(--border-radius-full) !important; }
.round-l-full { border-radius: var(--border-radius-full) 0 0 var(--border-radius-full) !important; }
.round-tl-full { border-top-left-radius: var(--border-radius-full) !important; }
.round-tr-full { border-top-right-radius: var(--border-radius-full) !important; }
.round-br-full { border-bottom-right-radius: var(--border-radius-full) !important; }
.round-bl-full { border-bottom-left-radius: var(--border-radius-full) !important; }
/** @endgroup */

/**
 * Unround the corners of elements. Target sides with `*-t`, `*-r`, `*-b`, `*-l`. Target corners with `*-tl`, `*-tr`, `*-bl`, `*-br`.
 *
 * @group
 * @memberof Border radius
 * @example
 * <input type='text' class='input unround' placeholder='.unround' />
 */
.unround { border-radius: 0 !important; }
.unround-t { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.unround-r { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.unround-b { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.unround-l { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.unround-tl { border-top-left-radius: 0 !important; }
.unround-tr { border-top-right-radius: 0 !important; }
.unround-br { border-bottom-right-radius: 0 !important; }
.unround-bl { border-bottom-left-radius: 0 !important; }
/** @endgroup */

/**
 * Apply outer shadows that add emphasis to elements or structure to layouts. Class naming follows the pattern `shadow-<lighten|darken><alpha>`.
 *
 * @section Shadows
 * @memberof Theming
 */

/**
 * Set the style of the cursor when hovering over an element.
 *
 * @section Cursors
 * @memberof Theming
 */

/**
 * Set the `cursor` property value of an element.
 *
 * @group
 * @memberof Cursors
 * @example
 * <div class='cursor-pointer'>cursor-pointer</div>
 * <div class='cursor-crosshair'>cursor-crosshair</div>
 * <div class='cursor-move'>cursor-move</div>
 * <div class='cursor-notallowed'>cursor-notallowed</div>
 * <div class='cursor-grab'>cursor-grab</div>
 * <div class='cursor-grabbing'>cursor-grabbing</div>
 * <div class='cursor-col-resize'>cursor-col-resize</div>
 * <div class='cursor-row-resize'>cursor-row-resize</div>
 */
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-crosshair { cursor: crosshair !important; }
.cursor-move { cursor: move !important; }
.cursor-notallowed { cursor: not-allowed !important; }
.cursor-grab { cursor: grab !important; }
.cursor-grabbing { cursor: grabbing !important; }
.cursor-col-resize { cursor: col-resize !important; }
.cursor-row-resize { cursor: row-resize !important; }

/** @endgroup */

/**
 * Dim elements, or hide them from the document flow  without removing them.
 *
 * @section Opacity
 * @memberof Theming
 */

/**
 * Apply an opacity.
 *
 * @group
 * @memberof Opacity
 * @example
 * <div class='opacity25'>opacity25</div>
 * <div class='opacity50'>opacity50</div>
 * <div class='opacity100'>opacity100</div>
 */
.opacity0 { opacity: 0 !important; }
.opacity25 { opacity: 0.25 !important; }
.opacity50 { opacity: 0.5 !important; }
.opacity75 { opacity: 0.75 !important; }
.opacity100 { opacity: 1 !important; }
/** @endgroup */

/**
 * Apply an opacity on hover and active states.
 *
 * `.opacity100-on-focus` is also available to make an otherwise transparent element opaque on focus.
 *
 * @group
 * @memberof Opacity
 * @example
 * <div class='opacity25-on-hover'>opacity25-on-hover</div>
 * <div class='opacity25-on-active'>opacity25-on-active (inactive)</div>
 * <div class='opacity25-on-active is-active'>opacity25-on-active (active)</div>
 * <button class='opacity0 opacity100-on-focus'>opacity100-on-focus</button>
 */
.opacity0-on-hover:hover,
.opacity0-on-active.is-active { opacity: 0 !important; }
.opacity25-on-hover:hover,
.opacity25-on-active.is-active { opacity: 0.25 !important; }
.opacity50-on-hover:hover,
.opacity50-on-active.is-active { opacity: 0.5 !important; }
.opacity75-on-hover:hover,
.opacity75-on-active.is-active { opacity: 0.75 !important; }
.opacity100-on-hover:hover,
.opacity100-on-active.is-active,
.opacity100-on-focus:focus { opacity: 1 !important; }
/** @endgroup */