.ui-helper-hidden {
  display: none;
}

:host.sc-sidetabs {
  display: flex;
  height: 100%;
}

.sc-sidetabs {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;

  @include media-breakpoint-up(sm) {
    grid-template-columns: minmax(160px, 280px) minmax(319px, 1fr);
  }

  &__tabs {
    overflow-y: auto;
    border-bottom: 1px solid;

    @include media-breakpoint-up(sm) {
      border-right: 1px solid;
      border-bottom: 0;
    }
  }

  &__content {
    padding: $card-padding;
    overflow: auto;

    // @include media-breakpoint-up(sm) {
    //   max-height: 353px;
    // }
  }
}

.mat-list-base,
.mat-list-base[dense] {
  padding: 0 !important;
}

.repeater-list {
  &__wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    @include media-breakpoint-up(sm) {
      border-radius: 0 0 0 $card-border-radius !important;
    }
  }

  &__list {
    // flex: 0 1 100px;
    max-height: 100px;
    overflow-y: auto;

    @include media-breakpoint-up(sm) {
      flex-grow: 1;
      max-height: none;
    }
  }

  &__item {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
  
    &-text {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-right: 8px;
    }

    &-actions {
      display: flex;
    }
  }

  &__action {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    border-top: 1px solid;

    .mat-button {
      width: 100%;
      padding: 8px 16px;
      border-radius: 0 !important;

      @include media-breakpoint-up(sm) {
        border-radius: 0 0 0 $button-border-radius !important;
      }

      &-wrapper {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  &__btn-item-delete {
    margin-left: auto !important; // remove important in production?
  }

  &__drag {
    margin-left: auto !important; // remove important in production?
    display: flex;
    align-items: center;
  }
}