@mixin a-background($background) {
  a {
    background: $background;
    &:active, &:hover {
      background: $background;
    }
  }
}

@mixin brand-logo($brand-logo-path, $width, $height, $scaled-height:"") {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  background: url($brand-logo-path) no-repeat;
  background-size: contain;

  @if $scaled-height != "" {
    $scale: $scaled-height / $height;
    $width: $width * $scale;
    $height: $scaled-height;
  }

  width: $width;
  height: $height;
}

@mixin dark-background {
  color: $palette-grayscale-accent;
  background-color: $palette-grayscale-dark;
}

@mixin disabled-link {
  &, &:hover, &:focus {
    color: $navbar-default-link-disabled-color;
    background-color: $navbar-default-link-disabled-bg;
  }
}

@mixin backgrid-table($app-name) {
  .integer-cell {
    text-align: right;
  }

  .filter-padding {
    padding-bottom: 10px;
  }

  .#{$app-name}-active-filters {
    .active-filters {
      display: inline-block;
      margin-bottom: 0px;

      li {
        padding-bottom: $padding-large-vertical;
      }
    }
  }

  .#{$app-name}-results-col {
    @media (min-width: $bp-screen-md) {
      .row .col:first-child {
        margin-top: $padding-large-vertical * 1.6;
      }
    }

    .#{$app-name}-num-results {
      text-align: left;
      margin-left: $padding-xs-horizontal;
      font-size: $font-size-small;
    }
  }

  .section-action {
    text-align: right;
    padding-bottom: 5px;
  }

  thead tr th {

    font-weight: 600;

    button {
      // update header colors
      color: $text-color;

      // the following overrides the button styling with link styling
      @extend a;
      border: none;
      background: none;
      padding: 0;
      text-align: left;

      &:hover {
        text-decoration: underline;
      }

      &:focus {
        text-decoration: underline;
        outline: 1px black dotted;
      }
    }

  }
  
  .#{$app-name}-table-controls {
    padding-bottom: 20px;

    .#{$app-name}-search {
      .wrapper-search-input {
        position: relative;

        .clear {
          position: absolute;
          right: 0px;
          top: 0px;
          z-index: 99;
          color: $edx-gray;

          &:hover {
            color: $edx-gray-d2;
          }
        }
      }

      .search {
        margin-left: 5px;
      }

    }

    .#{$app-name}-filter {

      padding-top: $padding-large-vertical * 2;

      // bootstrap defaults are to bold the labels
      label {
        font-weight: normal;
        display: inline-block;
        margin: 0;
        margin-bottom: $padding-base-vertical;

        // indent all lines that wrap so that they're aligned with the text instead of the checkbox
        text-indent: -$padding-large-horizontal;
        padding-left: $padding-large-horizontal;
      }

      // for the set of filters (e.g. label for the collection of checkboxes)
      .filters-label {
        font-weight: bold;
        margin-bottom: $padding-small-vertical;
      }

    }
  }

  .backgrid-paginator {

    ul {
      // remove default padding around the paging controls
      padding: 0;

      .disabled a {
        color: $palette-grayscale-base;
      }

      .active a {
        color: $palette-grayscale-base;
        background-color: $palette-grayscale-x-back;
      }
    }

  }
}
