@import "../mixins/less/mixins";

.widget-function('import_google_font');

@img-shape: 0;
@icon-bdr: '';
@icon-bdr-clr: '';
@icon-shape: 0;
@btn-size: default;
@btn-theme: flat;
@btn-clr: #333;
@btn-base: #eee;
@btn-crnr: 0;
@pad-top: '';
@pad-btm: '';
@title: inherit;
@content: inherit;
@bg: '';
@title-font-fly: default;
@title-font-wt: bold;
@btn-font-fly: default;
@btn-font-wt: bold;
@title-size: '';

.iw-so-media-box {
  padding-top: @pad-top;
  padding-bottom: @pad-btm;
  background: @bg;

  .iw-so-media-box-media {

    img {
      border-radius: @img-shape;
    }

    [class^="sow-icon-"] {
      .icon-border() when (@icon-bdr =1) {
        border: 2px solid @icon-brdr-clr;
      }

      .icon-border();
      border-radius: @icon-shape;
    }

  }

  .iw-so-media-box-text {

    .iw-so-media-box-title {
      color: @title;
      .font(@title-font-fly, @title-font-wt);
      font-size: @title-size;
    }

    .iw-so-media-box-content {
      color: @content;
    }

  }

  .iw-so-media-box-button {

    .iw-so-media-box-btn {
      border-radius: @btn-crnr;
      color: @btn-base;
      .font(@btn-font-fly, @btn-font-wt);

      .full-width() when (@btn-size =full) {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        box-sizing: border-box;
      }

      .full-width();

      .btn-theme() when (@btn-theme =classic) {
        .gradient(@btn-clr, darken(@btn-clr, 15%), @btn-clr);
        border: 1px solid;
        border-color: darken(@btn-clr, 8%) darken(@btn-clr, 10%) darken(@btn-clr, 13%) darken(@btn-clr, 10%);
      }

      .btn-theme() when (@btn-theme =flat) {
        background: @btn-clr;
        border: 1px solid @btn-clr;
      }

      .btn-theme() when (@btn-theme =outline) {
        background: transparent;
        border: 2px solid @btn-clr;
        color: @btn-clr;
      }

      .btn-theme() when (@btn-theme =threed) {
        background: @btn-clr;
        box-shadow: 0px 5px 0px 0px darken(@btn-clr, 10%);
      }

      .btn-theme() when (@btn-theme =shadow) {
        .drop-shadow(1px, 1px, 4px, 0.4);
        background: @btn-clr;
        border: 1px solid @btn-clr;
      }

      .btn-theme() when (@btn-theme =deline) {
        background: @btn-clr;
        border: 2px solid @btn-clr;
      }

      .btn-theme();

      &:hover {
        .dft-theme() when (@btn-theme =classic) {
          color: @btn-base;
        }

        .dft-theme() when (@btn-theme =flat) {
          color: @btn-base;
        }

        .dft-theme() when (@btn-theme =outline) {
          color: @btn-clr;
        }

        .dft-theme() when (@btn-theme =threed) {
          color: @btn-base;
        }

        .dft-theme() when (@btn-theme =shadow) {
          color: @btn-base;
        }

        .dft-theme() when (@btn-theme =deline) {
          color: @btn-base;
        }

        .dft-theme();
      }

    }

    .iw-so-media-box-btn-hover {

      &:hover {
        color: @btn-base;

        .btn-hover() when (@btn-theme =classic) {
          .gradient(lighten(@btn-clr, 2%), darken(@btn-clr, 20%), lighten(@btn-clr, 2%));
          border-color: darken(@btn-clr, 4%) darken(@btn-clr, 6%) darken(@btn-clr, 18%) darken(@btn-clr, 6%);
          color: @btn-base;
        }

        .btn-hover() when (@btn-theme =flat) {
          background: darken(@btn-clr, 7.5%);
          border-color: darken(@btn-clr, 7.5%);
        }

        .btn-hover() when (@btn-theme =outline) {
          background: @btn-clr;
          color: @btn-base;
        }

        .btn-hover() when (@btn-theme =threed) {
          background: lighten(@btn-clr, 10%);
        }

        .btn-hover() when (@btn-theme =shadow) {
          background: lighten(@btn-clr, 5%);
          border-color: lighten(@btn-clr, 5%);
          .drop-shadow(1px, 1px, 8px, 0.4);
        }

        .btn-hover() when (@btn-theme =deline) {
          color: @btn-clr;
          background: transparent;
        }

        .btn-hover();
      }

    }

    .iw-so-media-box-btn-click {

      &:active {
        .btn-active() when (@btn-theme =classic) {
          .box-shadow(inset 0 3px 25px darken(@btn-clr, 25%));
        }

        .btn-active() when (@btn-theme =flat) {
          background: darken(@btn-clr, 15%);
          border-color: darken(@btn-clr, 15%);
        }

        .btn-active() when (@btn-theme =outline) {
          background: lighten(@btn-clr, 10%);
          border-color: lighten(@btn-clr, 10%);
          color: @btn-base;
        }

        .btn-active() when (@btn-theme =threed) {
          -webkit-transform: translate(0, 5px);
          -moz-transform: translate(0, 5px);
          -ms-transform: translate(0, 5px);
          -o-transform: translate(0, 5px);
          transform: translate(0, 5px);
          box-shadow: 0px 1px 0px 0px;
        }

        .btn-active() when (@btn-theme =shadow) {
          background: darken(@btn-clr, 4%);
          border-color: darken(@btn-clr, 4%);
        }

        .btn-active() when (@btn-theme =deline) {
          color: lighten(@btn-clr, 20%);
          border-color: lighten(@btn-clr, 20%);
          background: transparent;
        }

        .btn-active();

      }

    }

  }

}