@import (reference) "~ui/styles/variables";

filter-bar {
  z-index: @filterBarDepth !important;
}

.filter-bar-confirm {
  padding: 8px 10px 4px;
  background: @filter-bar-confirm-bg;
  border-bottom: 1px solid;
  border-bottom-color: @filter-bar-confirm-border;

  ul {
    margin-bottom: 0px;
  }

  li {
    display: inline-block;
  }

  li:first-child {
    font-weight: bold;
    font-size: 1.2em;
  }

  li button {
    font-size: 0.9em;
    padding: 2px 8px;
  }

  .filter {
    position: relative;
    display: inline-block;
    text-align: center;
    // Number of filter icons multiplied by icon width
    // Escaped to prevent less math
    min-width: ~"calc(5*(1.414em + 13px))";
    vertical-align: middle;
    font-size: @font-size-small;
    background-color: @filter-bar-confirm-filter-bg;
    color: @filter-bar-confirm-filter-color;
    margin-right: 4px;
    margin-bottom: 4px;
    max-width: 100%;

    // Replace padding with border so absolute controls position correctly
    padding: 4px 8px;
    border-radius: 12px;
  }
}

.filter-panel {
  position: relative;

  .filter-panel__pill {
    display: inline;
  }

}

.filter-panel--close {
  max-height: 36px;
  overflow-y: hidden;
  min-width: 250px;

  .filter-panel__pill {
    display: inline-block;
  }
}

.filter-bar {
  padding: 6px 10px 1px 10px;
  background: @filter-bar-bar-bg;
  border-bottom: solid 1px @globalColorLightGray;

  .ace_editor {
    height: 175px;
  }

  .filter-edit-alias {
    margin-top: 15px;
  }

  .filter-link {
    position: relative;
    display: inline-block;
    border: 4px solid transparent;
    margin-bottom: 4px;
  }

  .filter-description {
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    line-height: 1.5;
  }

  .action-show {
    position: absolute;
    right: 30px;
    bottom: 0;
  }

  .filter-nav-link__icon {
    display: inline;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0.75;
    font-size: 16px;

    &:hover {
      opacity: 1;
    }

    .filter-nav-link__collapser {
      border: none;
      line-height: 1;
    }
  }

  .filter {
    position: relative;
    display: inline-block;
    text-align: center;
    // Number of filter icons multiplied by icon width
    // Escaped to prevent less math
    min-width: ~"calc(5*(1.414em + 13px))";
    font-size: @font-size-small;
    background-color: @filter-bar-bar-filter-bg;
    color: @filter-bar-bar-filter-color;
    margin-right: 4px;
    margin-bottom: 4px;
    max-width: 100%;
    vertical-align: middle;

    // Replace padding with border so absolute controls position correctly
    padding: 4px 8px;
    border-radius: 12px;

    .filter-actions {
      font-size: 1.1em;
      line-height: 1.4em;
      position: absolute;
      padding: 4px 8px;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      text-align: center;
      white-space: nowrap;
      display: flex;

      .action {
        border: none;
        border-right: 1px solid rgba(255, 255, 255, 0.4);
        padding: 0;
        background-color: transparent;
        flex: 1 1 auto;

        &:last-child {
          border-right: 0;
          padding-right: 0;
          margin-right: 0;
        }

        .unpinned {
          .opacity(.7);
        }

        .fa-disabled {
          opacity: 0.7;
          cursor: not-allowed;
        }
      }
    }

    .filter-actions-activated {
      opacity: 1;
    }

    .filter-description-deactivated {
      opacity: 0.15;
      background: transparent;
      overflow: hidden;
    }

    &.negate {
      background-color: @filter-bar-bar-filter-negate-bg;
    }

    a {
      color: @filter-bar-bar-filter-color;
    }

    &.disabled {
      opacity: 0.6;
      background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.3) 10px, rgba(255,255,255,.3) 20px);
    }

    &.disabled:hover {
      span {
        text-decoration: none;
      }
    }
  }
}

  .filter-bar-condensed {
    padding: 6px 6px 2px 6px !important;
    font-size: 0.9em;
    background: @filter-bar-bar-condensed-bg;
  }

// SASSTODO: Make sure these colors convert to theme variables
.tab-dashboard.theme-dark {
  @filter-bar-confirm-bg:                       @gray3;
  @filter-bar-confirm-filter-color:             @gray3;
  @filter-bar-confirm-border:                   @black;
  @filter-bar-confirm-filter-bg:                @gray12;
  @filter-bar-bar-bg:                           @gray3;
  @filter-bar-bar-border:                       @black;
  @filter-bar-bar-condensed-bg:                 darken(@filter-bar-bar-bg, 5%);
  @filter-bar-bar-filter-bg:                    desaturate(@brand-success, 30%);
  @filter-bar-bar-filter-color:                 @white;
  @filter-bar-bar-filter-negate-bg:             desaturate(@brand-success, 30%);

  .filter-bar-confirm {
    background: @filter-bar-confirm-bg;
    border-bottom-color: @filter-bar-confirm-border;

    .filter {
      background-color: @filter-bar-confirm-filter-bg;
      color: @filter-bar-confirm-filter-color;
    }
  }

  .filter-bar {
    background: @filter-bar-bar-bg;
    border-bottom-color: @filter-bar-bar-border;

    .filter {
      background-color: @filter-bar-bar-filter-bg;
      color: @filter-bar-bar-filter-color;

      &.negate {
        background-color: @filter-bar-bar-filter-negate-bg;
      }

      a {
        color: @filter-bar-bar-filter-color;
      }
    }
  }

    .filter-bar-condensed {
      background: @filter-bar-bar-condensed-bg;
    }
}
