@import "../../../themes/core/colors";
@import "../../../themes/core/typography";

$heightAction: 46px;

.qms-table-action {
  border: 1px solid #e4e4e4;
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: $heightAction;
  width: 100%;

  .qms-table-action-block {
    height: inherit;
    display: inline-flex;
  }

  .qms-table-action-block {
    &:first-child {
      .qms-button-toggle-group,
      button {
        &:first-child {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }
      }
      button,
      .qms-button-toggle-group {
        &:not(:first-child) {
          border-left: none;
        }
      }
    }

    &:last-child {
      .qms-button-toggle-group,
      button {
        &:last-child {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }
      }

      button,
      .qms-button-toggle-group {
        &:not(:last-child) {
          border-right: none;
        }
      }
    }
  }

  [class*="qms-button"],
  [class*="qms-btn"] {
    height: 100%;
    border-radius: 0;
  }

  .qms-button-toggle-label-content {
    line-height: $heightAction - 2px;
    padding: 0 9px;
  }

  .mat-form-field.qms-search-field .mat-form-field-suffix {
    .mat-icon-button {
      margin-bottom: 0;
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  .mat-form-field.qms-search-field .mat-form-field-flex {
    align-items: center !important;
    border-radius: 0 !important;
    height: $heightAction;
    border-bottom: none;
  }
}

button.btn-more {
  display: none;

  mat-icon {
    color: $primary;
    vertical-align: middle;
  }
}

#block1,
#block2,
#block3,
#block4 {
  display: none;
}
.block1,
.block2,
.block3,
.block4 {
  display: inline-flex;
}
#block1:checked + .block1 {
  display: inline-flex;
}
#block2:checked + .block2 {
  display: inline-flex;
}
#block3:checked + .block3 {
  display: inline-flex;
}
#block4:checked + .block4 {
  display: inline-flex;
}

@media (max-width: 1199.98px) {
  button.btn-block1 {
    display: inline-block;
  }
  .block1 {
    display: none;
  }
}

@media (max-width: 991.98px) {
  button.btn-block2 {
    display: inline-block;
  }
  .block2 {
    display: none;
  }
}

@media (max-width: 767.98px) {
  button.btn-block3 {
    display: inline-block;
  }
  .block3 {
    display: none;
  }
}

@media (max-width: 575.98px) {
  button.btn-block4 {
    display: inline-block;
  }
  .block4 {
    display: none;
  }
}