@use '../../../styles/_globals.scss' as *;

:host {
  // NOTE 0 because we want the inner scrollbars at the very right
  padding: var(--s) 0;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  height: 100%;

  ::ng-deep {
    .mat-mdc-tab-header {
      @include mq(xs, max) {
        margin-right: 50px;
      }
    }

    .mat-mdc-tab-body-wrapper {
      min-height: 0;
      height: 100%;
    }

    .mat-mdc-tab {
      min-width: 40px !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .mat-tab-label:last-child {
      opacity: 1;
      min-width: 20px;
      padding: 0;
    }

    .mat-mdc-tab-group {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .mat-mdc-tab-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .mat-mdc-tab-body-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      //border: 1px solid yellow;
    }
  }
}

.tab-header-item {
  min-width: 52px;
  min-height: 48px;
  padding-left: var(--s);
  padding-right: var(--s);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  &.disabled {
    opacity: 0.5;
  }
}

.initials {
  margin-top: 1px;
  font-size: 12px;

  color: var(--text-color-most-intense);
}

::ng-deep .issue-provider-drag-preview {
  min-width: 0 !important;
  background: transparent;
  overflow: hidden;
  border-radius: 8px;
}

::ng-deep .issue-provider-drag-preview.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
