@import "../../../../../node_modules/bootstrap/less/mixins.less";
@import "../../../../../node_modules/bootstrap/less/variables.less";
@import "../variables.less";
@import "../mixins.less";

body
{
  .modal-header {
    background-color: @corp-green;
  }

  .modal-module-list {
    .modal-header {
      background-color: #fff;
      .close {
        color: @corp-green;
      }
    }
    .modal-title {
      color: @corp-green;
    }
  }


  .modal-content {
    .border-radius(3px);
    .box-shadow(0 5px 10px rgba(0, 0, 0, .3));
    border: 0;
    @media (min-width: @screen-sm-min) {
      .box-shadow(0 5px 10px rgba(0, 0, 0, .3));
    }
  }

  .modal-header {
    color: #fff;
    border-bottom: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    text-align: center;
    cursor: move;
    padding: 10px 15px;

    .close {
      color: #fff;
      margin-top: 0;
      font-size: 34px;
      font-weight: normal;
      text-shadow: none;
      filter: alpha(opacity=80);
      opacity: .8;
      &:hover {
        filter: alpha(opacity=100);
        opacity: 1;
      }
    }
  }

  .modal-footer {
    border-top-color: @box-border-color;
    padding: 10px 15px;

    .button-submit-add {
      display: none;
    }
  }

  //Modal variants
  .modal-module-list {
    .dui-svg-icon {
      width: 40px;
      height: 40px;
      display: block;
      margin: 0 auto;
    }

    .btn-app {
      position: relative;
      display: inline-block;
      width: 110px;
      height: 100px;
      background-color: #fff;
      border-color: transparent;
      border-radius: 5px;
      white-space: normal;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
      transition: box-shadow .25s;

      &:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, .2);

        > .badge.badge-pin {
          display: inline-block;
        }
      }

      &:active, &:focus {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
      }

      > .badge.badge-pin {
        display: none;
        top: 0;
        right: -3px;
        background-color: transparent;
        border: none;
        font-size: 11px;

        &:hover {
          .icon-pin-module path {
            fill: #888;
          }
        }

        &.active {
          display: inline-block;
          .icon-pin-module path {
            fill: #888;
          }
        }

        .icon-pin-module {
          display: inline-block;
          vertical-align: middle;
          width: 16px;
          height: 16px;
          path {
            fill: #bbb;
          }
        }
      }
    }
  }

  @media (min-width: @screen-lg-min) {
    .modal-lg { width: @screen-lg; }
    .modal-module-list .modal-lg { width: @modal-lg; }
  }
}