@import 'elements/colors';


.shortpixel.shortpixel-notice
{

   .details-wrapper // open close mechanic.
   {
      margin: 8px 0 4px 0;
      .detail-content-wrapper
      {
        max-height: 0;
        overflow: hidden;

        .detail-content {
          opacity: 0;
          transition: opacity 750ms linear;
        }
      }
      label
      {
        opacity: 100;
        transition: opacity 250ms ease-in;
        span
        {
          cursor: pointer;
          font-size: 14px;
          color: #0085ba;
          font-weight: 500;
        }
      }
      input[name="detailhider"] { display: none; } // hidden checkbox
      input[name="detailhider"]:checked ~ .detail-content-wrapper
      {
          max-height: none;
      }
      input[name="detailhider"]:checked ~ .detail-content-wrapper .detail-content
      {
          opacity: 100;

      }
      input[name="detailhider"]:checked ~ .show-details
      {
         opacity: 0;
        transition: opacity 50ms ease-out;
      }
      input[name='detailhider']:not(:checked) ~ .hide-details
      {
         opacity: 0;
         transition: opacity 50ms ease-out;
      }
   }
}

// compat list if.
.shortpixel.shortpixel-notice
{
  .sp-conflict-plugins {
      display: table;
      border-spacing: 10px;
      border-collapse: separate;
      li {
          display: table-row;
      }
      li > * {
          display: table-cell;
      }

  }

  .content .button-primary
  { // gets overwritten in NGG.
    background-color: $color-darkest;
    border-color: $color-darkest;
    color: #fff;

		&:hover { background-color: $color-dark; }
  }

  li.sp-conflict-plugins-list {
      line-height: 28px;
      list-style: disc;
      margin-left: 80px;
  }
  li.sp-conflict-plugins-list a.button {
      margin-left: 10px;
  }
}