@import "../start";
@import "badge";

#fs_addons
{
    .fs-cards-list
    {
        list-style: none;

        .fs-card
        {
            float:      left;
            //            height: 185px; // With reviews/ratings
            height:     152px;
            width:      310px;
            padding:    0;
            margin:     0 0 30px 30px;
            font-size:  14px;
            list-style: none;
            border:     1px solid #ddd;
            cursor:     pointer;
            position:   relative;

            .fs-overlay
            {
                position: absolute;
                left:     0;
                right:    0;
                bottom:   0;
                top:      0;
                z-index:  9;
            }

            .fs-inner
            {
                background-color: #fff;
                overflow:         hidden;
                height:           100%;
                position:         relative;

                & > ul
                {
                    transition: all, 0.15s;
                    left:     0;
                    right:    0;
                    top:      0;
                    position: absolute;

                    & > li
                    {
                        list-style:  none;
                        line-height: 18px;
                        padding:     0 15px;
                        width:       100%;
                        display:     block;
                        box-sizing: border-box;
                    }
                }

                .fs-card-banner
                {
                    padding:           0;
                    margin:            0;
                    line-height:       0;
                    display:           block;
                    height:            100px;
                    background-repeat: repeat-x;
                    background-size:   100% 100%;
                    transition:        all, 0.15s;

                    .fs-badge.fs-installed-addon-badge {
                        font-size:      1.02em;
                        line-height:    1.3em;
                    }
                }

                .fs-title
                {
                    margin:        10px 0 0 0;
                    height:        18px;
                    overflow:      hidden;
                    color:         #000;
                    white-space:   nowrap;
                    text-overflow: ellipsis;
                    font-weight:   bold;
                }

                .fs-offer
                {
                    font-size: 0.9em;
                }

                .fs-description
                {
                    background-color: #f9f9f9;
                    padding:          10px 15px 100px 15px;
                    border-top:       1px solid #eee;
                    margin:           0 0 10px 0;
                    color:            #777;
                }

                .fs-tag
                {
                    position: absolute;
                    top: 10px;
                    right: 0px;
                    background: greenyellow;
                    display: block;
                    padding: 2px 10px;
                    box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
                    text-transform: uppercase;
                    font-size: 0.9em;
                    font-weight: bold;
                }

                .fs-cta
                {
                    .button, .button-group
                    {
                        position: absolute;
                        top: 112px;
                        right: 10px;
                    }
                }
            }

            @media screen and (min-width: 960px) {
                &:hover
                {
                    .fs-overlay
                    {
                        border:      2px solid $fms-link-color;
                        margin-left: -1px;
                        margin-top:  -1px;
                    }

                    .fs-inner
                    {
                        ul
                        {
                            top: -100px;
                        }

                        .fs-card-banner
                        {
                            //                        background-position: 50% -100px;
                        }

                        .fs-title,
                        .fs-offer
                        {
                            color: $fms-link-color;
                        }
                    }
                }
            }
        }
    }
}

#TB_window
{
    &, iframe
    {
        width: 821px !important;
    }
}

#plugin-information
{
    .fyi {
        width: 266px !important;
    }

    #section-holder {
        margin-right: 299px;
        clear: none;
    }

    #section-description
    {
        h2, h3, p, b, i, blockquote, li, ul, ol
        {
            clear: none;
        }
        
        iframe 
        {
            max-width: 100%;
        }

        .fs-selling-points
        {
            padding-bottom: 10px;
            border-bottom:  1px solid #ddd;

            ul
            {
                margin: 0;

                li
                {
                    padding:    0;
                    list-style: none outside none;

                    i.dashicons
                    {
                        color:          $fs-logo-green-color;
                        font-size:      3em;
                        vertical-align: middle;
                        line-height:    30px;
                        float:          left;
                        margin:         0 0 0 -15px;
                    }

                    h3
                    {
                        margin: 1em 30px !important;
                    }
                }
            }
        }

        .fs-screenshots
        {
            @include clearfix();
            ul
            {
                list-style: none;
                margin:     0;

                li
                {
                    width:         225px;
                    height:        225px;
                    float:         left;
                    margin-bottom: 20px;
                    box-sizing: content-box;

                    a
                    {
                        display:         block;
                        width:           100%;
                        height:          100%;
                        border:          1px solid;
                        box-shadow:      1px 1px 1px rgba(0, 0, 0, 0.2);
                        background-size: cover;
                    }

                    &.odd
                    {
                        margin-right: 20px;
                    }
                }
            }
        }
    }

    .plugin-information-pricing
    {
        $pricing_color: #FFFEEC;
        $borders_color: #DDD;
        margin:        -16px;
        //        padding: 20px;
        border-bottom: 1px solid $borders_color;

        .fs-plan
        {

            h3
            {
                margin-top: 0;
                padding:    20px;
                font-size:  16px;
            }

            .nav-tab-wrapper
            {
                border-bottom: 1px solid $borders_color;

                .nav-tab
                {
                    cursor:    pointer;
                    position:  relative;
                    padding:   0 10px;
                    font-size: 0.9em;

                    label
                    {
                        text-transform: uppercase;
                        color:          green;
                        background:     greenyellow;
                        position:       absolute;
                        left:           -1px;
                        right:          -1px;
                        bottom:         100%;
                        border:         1px solid darkgreen;
                        padding:        2px;
                        text-align:     center;
                        font-size:      0.9em;
                        line-height:    1em;
                    }

                    &.nav-tab-active
                    {
                        cursor:              default;
                        background:          $pricing_color;
                        border-bottom-color: $pricing_color;
                    }
                }
            }

            &.fs-single-cycle
            {
                h3
                {
                    background:     $pricing_color;
                    margin:         0;
                    padding-bottom: 0;
                    color:          #0073aa;
                }

                .nav-tab-wrapper,
                .fs-billing-frequency
                {
                    display: none;
                }
            }

            .fs-pricing-body
            {
                background: $pricing_color;
                padding:    20px;
            }

            .button
            {
                width:          100%;
                text-align:     center;
                font-weight:    bold;
                text-transform: uppercase;
                font-size:      1.1em;
            }

            label
            {
                white-space: nowrap;
            }

            var {
                font-style: normal;
            }

            .fs-billing-frequency,
            .fs-annual-discount
            {
                text-align: center;
                display: block;
                font-weight: bold;
                margin-bottom: 10px;
                text-transform: uppercase;
                background: #F3F3F3;
                padding: 2px;
                border: 1px solid #ccc;
            }

            .fs-annual-discount
            {
                text-transform: none;
                color:          green;
                background:     greenyellow;
            }

            ul.fs-trial-terms
            {
                font-size: 0.9em;

                i
                {
                    float:  left;
                    margin: 0 0 0 -15px;
                }

                li
                {
                    margin: 10px 0 0 0;
                }
            }
        }
    }

    #section-features
    {
        .fs-features
        {
            margin: -20px -26px;
        }

        table
        {
            width:           100%;
            border-spacing:  0;
            border-collapse: separate;

            thead
            {
                th
                {
                    padding: 10px 0;
                }

                .fs-price
                {
                    color:       $fs-logo-green-color;
                    font-weight: normal;
                    display:     block;
                    text-align:  center;
                }
            }

            tbody
            {
                td
                {
                    border-top: 1px solid #ccc;
                    padding:    10px 0;
                    text-align: center;
                    width:      100px;
                    color:      $fs-logo-green-color;

                    &:first-child
                    {
                        text-align:   left;
                        width:        auto;
                        color:        inherit;
                        padding-left: 26px;
                    }
                }
                tr.fs-odd
                {
                    td
                    {
                        background: #fefefe;
                    }
                }
            }
        }

        .dashicons-yes
        {
            width:     30px;
            height:    30px;
            font-size: 30px;
        }
    }
}

.fs-dropdown {
  #fs_addons .fs-cards-list .fs-card .fs-inner &, #plugin-information & {
    .button-group {
      .button {
        position: relative;
        width: auto;
        top: 0;
        right: 0;

        &:focus {
          z-index: 10;
        }
      }

      .fs-dropdown-arrow {
        border-top: 6px solid white;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        top: 12px;
        position: relative;
      }
    }

    &.active:not(.up) {
      .button:not(.fs-dropdown-arrow-button) {
        border-bottom-left-radius: 0;
      }

      .fs-dropdown-arrow-button {
        border-bottom-right-radius: 0;
      }
    }

    &.active.up {
      .button:not(.fs-dropdown-arrow-button) {
        border-top-left-radius: 0;
      }

      .fs-dropdown-arrow-button {
        border-top-right-radius: 0;
      }
    }

    .fs-dropdown-list {
      position: absolute;
      right: -1px;
      top: 100%;
      margin-left: auto;
      padding: 3px 0;
      border: 1px solid lighten($darkest-color, 75%);
      background-color: #fff;
      z-index: 1;
      width: 230px;
      text-align: left;
      box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);

      li {
        margin: 0;

        a {
          display: block;
          padding: 5px 10px;
          text-decoration: none;
          text-shadow: none;
        }

        &:hover {
          background-color: $wp-selected-color;
          color: #fff;

          a {
            color: #fff;
          }
        }
      }
    }

    &:not(.up) {
      .fs-dropdown-list {
        border-radius: 3px 0 3px 3px;
      }
    }

    &.up {
      .fs-dropdown-list {
        border-radius: 3px 3px 0 3px;
      }
    }
  }

  #plugin-information & {
    .button-group {
      width: 100%;

      .button {
        float: none;
        font-size: 14px;
        font-weight: normal;
        text-transform: none;
      }
    }

    .fs-dropdown-list {
      margin-top: 1px;
    }

    &.up {
      .fs-dropdown-list {
        top: auto;
        bottom: 100%;
        margin-bottom: 2px;
      }
    }
  }
}

#plugin-information.wp-core-ui .fs-pricing-body .fs-dropdown .button-group {
  text-align: center;

  display: table;

  .button {
    display: table-cell;

    &:not(.fs-dropdown-arrow-button) {
      left: 1px;
      width: 100%;
    }
  }
}

#plugin-information-footer {
  > .button, .fs-dropdown {
    position: relative;
    top: 3px;

    &.left {
      float: left;
    }
  }

  > .right, .fs-dropdown {
    float: right;
  }
}

@media screen and (max-width: 961px) {
    #fs_addons
    {
        .fs-cards-list
        {
            .fs-card
            {
                height: 265px;
            }
        }
    }
}
