@import 'compass';
@import 'visuallyhidden';

#mgjp_mv_protection_toggle {
  @extend .visuallyhidden;
}

#mgjp_mv_protection_metabox {
  .inside { position: static; }
  p.mgjp-mv-permission-select {
    margin: 0 0 3.5em !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    @include transition(.5s opacity, .5s .1s max-height);
  }
}

.mgjp-mv-protection-toggle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1em 15px;
  .mgjp-on {
    width: 100%;
    text-align: center;
  }
  .mgjp-off {
    display: none;
    color: #f00;
  }
  .mgjp-on, .mgjp-off {
    &:after {
      content: attr(data-mgjp-content);
      speak: none;
    }
  }
}

p.mgjp-mv-permission-select.mgjp-mv-active {
  margin-bottom: 4.2em !important;
  max-height: 100px;
  opacity: 1;
  @include transition(.3s .1s opacity, .5s max-height ease-out);
}
#mgjp_mv_protection_toggle:checked {
  ~ p.mgjp-mv-permission-select {
    @extend p.mgjp-mv-permission-select.mgjp-mv-active;
  }
  + .mgjp-mv-protection-toggle {
    border-top: 1px solid #dfdfdf;
    @include box-shadow(inset 0 1px #fff);
    .mgjp-on { display: none; }
    .mgjp-off { display: block; }
  }
}

// MP6 styles
.mp6, .mgjp_mp6 {
  #mgjp_mv_protection_metabox p.mgjp-mv-permission-select {
    margin-bottom: 2.7em !important;
  }
  .mgjp-mv-protection-toggle {
    .mgjp-off {
      color: #a00;
      border-bottom: none;
      &:hover, &:focus, &:active {
        color: #f00;
      }
    }
  }
  p.mgjp-mv-permission-select.mgjp-mv-active {
    margin-bottom: 2.4em !important;
  }
  #mgjp_mv_protection_toggle:checked {
    ~ p.mgjp-mv-permission-select {
      margin-bottom: 2.4em !important;
    }
    + .mgjp-mv-protection-toggle {
      border-top: none;
      @include box-shadow(none);
    }
  }
}