@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-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;
  }

  .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);
        }
      }
    }

    .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;
  }
