
.filter {
  &__item {
    &--confusion {
      background: palette(white);
      &__button {
        cursor: pointer;
        .confusion-matrix {
          pointer-events: none;
        }
      }
      &:after {
          content: '';
          border-color: palette(grey, dark);
          border-style: solid;
          border-width: 1px 1px 0 0;
          display: inline-block;
          height: 8px;
          width: 8px;
          transform: translateY(-50%) rotate(133deg);
          transition: all 1.5s ease;
          position: absolute;
          right: 1em;
          top: 50%;
          pointer-events: none;
      }
      text-align: left;
      transition: border 0.2s ease;
      &:hover,
      &:focus {
          border: 2px solid palette(purple);
          background: palette(white);
          transition: border 0.2s ease, background 0.2s ease;
      }
      .filter__buttons, .button-clear {
          display: none;
      }
    }
    &.expanded {
      min-width: 70px;
      transform: translateX(-50%);
      margin-top: 10px;
      left: 50%;
      width: auto;
      border: 2px solid palette(purple);
      text-align: center;
      position: absolute;
      background: palette(white);
      padding: 0.8em 0.8em 0 0.8em;
      min-height: auto;
      height: auto;
      transition: height 0.1s ease-in-out;
      overflow: visible;
      border-radius: 2px;
      z-index: 4;
      pointer-events: all;
      min-width: 600px;
      @include media('<xxl') {
        min-width: 530px;
      }
      &:after {
          display: none;
      }
      .confusion-matrix {
        ::v-deep svg {
          height: 400px !important;
          @include media('<xxl') {
            height: 300px !important;
          }
        }
        pointer-events: visible;
        ::v-deep .role-axis {
          display: block !important;
        }
      }
      .panel {
          max-width: none;
          position: relative;
          top: 0.5em;
          left: auto;
          right: auto;
          text-align: center;
      }
      .button-clear {
          float: right;
          margin-left: auto;
          margin-bottom: 0;
          margin-right: 0.5em;
          display: inline-block;
      }
      .close-filter-button {
          display: none;
      }
      .filter__buttons {
        display: block;
      }
      .confusion-matrix {
          overflow: auto;
          width: 100%;
          max-width: 1400px;
          overflow: scroll;
          margin: 0 auto 0 auto;
      }
      .clear {
          height: 0px;
      }
      .label-default {
          display: block;
      }
    }
    &.expanded--full {
      margin-top: auto;
      transform: translate(-50%, 0);
      left: 50%;
      top: 10%;
      max-width: 100vw;
      position: fixed;
      border: 2px solid palette(purple);
      width: 80vw;
      text-align: center;
      padding-bottom: 0;
      .confusion-matrix {
        height: 65vh;
        ::v-deep svg {
          height: auto !important;
        }
      }
      .button-clear {
          margin-right: 2.5em;
      }
      .close-filter-button {
          position: absolute;
          display: block;
          top: 1em;
          right: 1em;
          cursor: pointer;
      }
      .filter__buttons {
          display: block;
          margin-top: 2em;
      }
      svg {
        height: 65vh;
      }
    }
  }
}

.datum {
  width: 100%;
  float: left;
  span {
    display: block;
  }
}
.label-default {
    color: palette(purple);
    display: none;
}

::v-deep .marks {
  .background {
    stroke: none !important;
  }
  line {
    stroke: none !important;
  }
  .role-axis {
    display: none !important;
  }
  .role-legend {
    display: none !important;
  }
  text {
    font-weight: normal !important;
    font-family: $ff !important;
  }
}


::v-deep .confusion-matrix {
  svg {
    height: 37px !important;
    margin-top: 2px;
  }
  .marks path:hover {
    cursor: pointer;
    stroke: palette(purple);
    stroke-width: 2px;
  }
}
