// Bootstrap functions
@import "../../../../media/vendor/bootstrap/scss/functions";

// Bootstrap other
@import "../../../../media/vendor/bootstrap/scss/mixins";
@import "../../../../media/vendor/bootstrap/scss/variables";

// Extension variables
$extension-types: (
  "jcommercial": #f6c801,
  "jcomponent":  #1e9e33,
  "jlanguage":   $dark,
  "jmodule":     #e20a0a,
  "jplugin":     #57278e,
  "jspecific":   #d69b34,
  "jtool":       #333
);

.com-apps-container {
  // Extension type badges
  .badge {
    margin: 1px;
    // BS5 Dropped all .badge-* color classes
    &.badge-success {
      background-color: var(--success);
    }
    &.badge-secondary {
      background-color: var(--secondary);
    }
    &.badge-danger {
      background-color: var(--danger);
    }
    &.badge-warning {
      background-color: var(--warning);
    }
  }

  .fader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 5px;
    text-align: center;
    @include gradient-y(rgba(255,255,255,0), rgba(255,255,255,1), 70%, 95%);
  }

  .com-apps-sidebar {
    // Bootstrap 4 does not indent second level navigation
    .nav {
      .nav {
        padding-left: 15px;
      }
    }

    a {
      &:hover,
      &.active {
        color: $white;
        text-decoration: none;
        background-color: #33608f;
      }
    }
  }

  .grid-container {
    .card {
      height: 400px;
      margin-bottom: 2rem;

      &:hover {
        background-color: var(--gray-200);
      }
    }

    .card-img, .card-img-top {
      height: 6rem;
      overflow: hidden;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    .card-text {
      height: 160px;
      overflow: hidden;
    }

    .card-body {
      padding: .5rem;
      cursor: pointer;
    }
  }

  .list-container {
    box-sizing: border-box;

    // Override fader gradient
    .fader {
      @include gradient-y(rgba(255,255,255,0), rgba(255,255,255,1), 0%, 25%);
    }

    .list-group-item {
      margin-bottom: 10px;

      &:hover {
        background-color: #f8f8f8;
      }

      .row {
        cursor: pointer;
      }
    }
  }

  .item-view {
    margin-top: 3rem;
    a[target="_blank"] {
      span.icon-download, span.icon-list, span.icon-share-alt {
        display: none;
      }
    }
  }
  .form-row {
    display: flex;
    .col-md:first-child {
      margin-inline-end: .8rem;
    }

    .input-group {
      .input-group-append {
        button#search-extensions {
          border-start-start-radius: 0;
          border-end-start-radius: 0;
        }

        button#search-reset {
          margin-inline-start: .8rem;
        }
      }
    }
  }
}

// Disallow scrolling when overlay is active
.ifw-busy {
  overflow: hidden;
}

.ifw-loading-container {
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: url("../../system/images/ajax-loader.gif") rgba(255,255,255,.7) 50% 10px no-repeat;
  opacity: .95;
}