@import "../../ui-components/styles/variables";

:host {
  display: block;
  z-index: 1000;
  width: 100%;
  font-size: 14px;

  .vertical-layout {
    font-size: 13px;

    &.x-axis-options {
      flex-direction: column;
      flex-wrap: wrap;
      width: 100%;
    }

    .group-by-field,
    .axis-type-field {
      width: unset;
      flex: 1 1 150px;
      max-width: 150px;
    }

    .label-text {
      display: flex;
      align-items: center;
      white-space: nowrap;
      width: 95px;
      min-width: 95px;
      padding-right: 12px;
      padding-bottom: 4px;
    }

    .axis-text-margin-left {
      margin-left: 0;
    }

    .close-settings {
      display: none;
    }

    .smooth-options {
      width: 100%;

      mat-slider {
        flex: 1 1 80px;
        min-width: unset;
      }

    }
  }

  //::ng-deep .mat-form-field-appearance-outline:not(.data-text) .mat-form-field-outline {
  //  top: 16px;
  //  bottom: 4px;
  //  background-color: transparent;
  //  color: $grey-purple
  //}
  //
  //::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
  //  margin-top: -6px !important;
  //
  //  .mat-select-value {
  //    color: $blue-400;
  //  }
  //}
}

.x-axis-options {
  display: flex;
  justify-content: space-between;
}

.smooth-input {
  width: 55px;
  margin-left: 6px;
}

.smooth-options {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.label-text {
  padding-right: 6px;
  margin: auto;
  &.axis-text-margin-left {
    margin-left: 24px;
  }
}

.smoothing-text {
  margin: auto 0;
  margin-left: auto;
  padding-right: 6px;
}

.smooth-options i {
  margin: auto 0;
  margin-left: 25px;
}

mat-form-field {
  width: 150px;
}

.axis-type-field {
  width: 130px;
}

.group-by-field {
  width: 140px;
}

mat-slider {
  min-width: 121px;
  top: -15px;
  height: unset;
}

