@import "start";

#fs_customizer_upsell {
  .fs-customizer-plan {
    padding: 10px 20px 20px 20px;
    border-radius: 3px;
    background: #fff;

    h2 {
      position: relative;
      margin: 0;
      line-height: 2em;
      text-transform: uppercase;

      .button-link {
        top: -2px;
      }
    }
  }

  .fs-feature {
    position: relative;
  }

  .dashicons-yes {
    color: #0085ba;
    font-size: 2em;
    vertical-align: bottom;
    margin-left: -7px;
    margin-right: 10px;

    .rtl & {
      margin-left: 10px;
      margin-right: -7px;
    }
  }

  .dashicons-editor-help {
    color: #bbb;
    cursor: help;

    $tooltip-color: #000;

    .fs-feature-desc {
      opacity: 0;
      visibility: hidden;
      @include transition(opacity 0.3s ease-in-out);

      position: absolute;
      background: $tooltip-color;
      color: #fff;
      font-family: 'arial', serif;
      font-size: 12px;
      padding: 10px;
      z-index: 999999;
      bottom: 100%;
      margin-bottom: 5px;
      left: 0;
      right: 0;
      @include border-radius(5px);
      @include box-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
      line-height: 1.3em;
      font-weight: bold;
      text-align: left;

      .rtl & {
        text-align: right;
      }

      &::after {
        content: ' ';
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 5px 0 5px;
        border-color: $tooltip-color transparent transparent transparent;
        position: absolute;
        top: 100%;
        left: 21px;

        .rtl & {
          right: 21px;
          left: auto;
        }
      }
    }

    &:hover {
      .fs-feature-desc {
        visibility: visible;
        opacity: 1;
      }
    }
  }

  .button-primary {
    display: block;
    text-align: center;
    margin-top: 10px;
  }
}

#fs_customizer_support {
  display: block !important;

  .button {
    float: right;
  }

  .button-group {
    width: 100%;
    display: block;
    margin-top: 10px;

    .button {
      float: none;
      width: 50%;
      text-align: center;
    }
  }
}