/*
* Styles for the Content Visibility WordPress plugin by Rich Tape.
*
* This file provides the core styling for the main Content Visibility Plugin. We mostly
* use native WordPress control components, and rely on their styling to make this plugin
* feel native to WordPress. However, there are some tweaks needed as we're using components
* in ways that WordPress doesn't use yet - and hence doesn't provide styling affordances for.
*/
/*
    Ensure our slots for add-ons are block.
*/
.content-visibility-controls .content-visibility-extra-controls {
  display: block; }

/*
    Give the Rules Enabled toggle a little more breathing room.
*/
.content-visibility-controls .content-visibility-rules-enabled .components-toggle-control {
  margin: 1rem 0; }

/*
    Make the Show/Hidden radio buttons sit next to each other...
*/
.content-visibility-controls .components-base-control__label {
  max-width: none;
  margin-top: 1em; }

.content-visibility-controls .components-radio-control__option {
  width: 50%;
  margin: 0.5em 0 0;
  display: inline-block; }

/*
    ...But not for User Roles
*/
.content-visibility-controls .content-visibility-user-role-control .components-radio-control__option {
  width: 100%; }

/*
    User Auth controls, with the help text, look weird due to flex.
*/
.content-visibility-control-panel.content-visibility-user-authenticated-controls .components-panel__row {
  display: block; }

.content-visibility-user-authenticated-control {
  width: 100%;
  display: block;
  float: none;
  clear: both; }

/*
    Make the shown/not shown control stand out a little
*/
.content-visibility-displayed-control .components-base-control.components-radio-control {
  margin-bottom: 0 !important; }

.content-visibility-displayed-control .components-base-control.components-radio-control .components-base-control__field {
  margin-bottom: 0; }

.content-visibility-displayed-control .components-base-control__field .components-radio-control__option:last-of-type {
  text-align: right; }

/*
    Styling for the rule panels
*/
.content-visibility-controls.is-opened .content-visibility-control-panel {
  border: 1px solid #e2e4e7;
  margin-bottom: 1em;
  background: #fcfcfc;
  width: 100%; }

.content-visibility-controls.is-opened .content-visibility-control-panel.is-opened .components-panel__body-toggle {
  border-bottom: 1px solid #e2e4e7; }

/*
    When the rules are disabled (default) we lower opacity of controls
*/
.content-visibility-controls-container.hide-controls {
  opacity: 0.2; }

/*
    Tidy up margins for user auth
*/
.content-visibility-user-authenticated-controls .components-panel__row .content-visibility-user-authenticated-control {
  margin-bottom: 0; }

/*
    User roles have a massive margin, reduce that
*/
.content-visibility-user-role-controls .components-panel__row ul {
  margin-bottom: 0; }

.content-visibility-user-role-controls .components-panel__row ul .components-base-control {
  margin-bottom: 5px; }

.content-visibility-user-role-controls .components-panel__row ul .components-base-control:last-of-type {
  margin-bottom: 0; }

/*
    When a block has rules enabled, we style it to show it has rules. Looks a bit weird that we have two
    rules almost identical. But the BlockListBlock component only accepts one className so this is how it has to be.
    Different icons used for 'shown' or 'hidden' rules.
*/
.wp-admin .wp-block.content-visibility-rules-enabled-shown:after {
  display: block;
  height: 24px;
  width: 24px;
  margin-left: 105%;
  margin-top: 1%;
  opacity: 0.25;
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>'); }

.wp-admin .wp-block.content-visibility-rules-enabled-hidden:after {
  display: block;
  height: 24px;
  width: 24px;
  margin-left: 105%;
  margin-top: 1%;
  opacity: 0.25;
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>'); }

/*
    Help text generic styling. This is to make it look like a WordPress hint.
*/
.content-visibility-controls-container .content-visibility-help-text {
  margin: 1rem 0 0;
  font-size: 12px;
  font-style: normal;
  color: #757575;
  clear: both;
  float: none;
  width: 100%; }


/*# sourceMappingURL=index.css.map*/