.kubeflowtype-bordered-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--pf-v6-global--BorderColor--100);
  padding: 1px;

  &:after {
    position: absolute;
    width: 48px;
    height: 4px;
    background: transparent;
    top: 0;
    left: calc(50% - 24px);
    border-radius: 0 0 4px 4px;
    content: ' ';
  }
  &.project {
    &:after {
      background: var(--ai-project--BorderColor);
    }
  }
  &.notebook {
    &:after {
      background: var(--ai-notebook--BorderColor);
    }
  }
  &.pipeline {
    &:after {
      background: var(--ai-pipeline--BorderColor);
    }
  }
  &.pipeline-run {
    &:after {
      background: var(--ai-pipeline--BorderColor);
    }
  }
  &.cluster-storage {
    &:after {
      background: var(--ai-cluster-storage--BorderColor);
    }
  }
  &.model-server {
    &:after {
      background: var(--ai-model-server--BorderColor);
    }
  }
  &.data-connection {
    &:after {
      background: var(--ai-data-connection--BorderColor);
    }
  }
  &.user {
    &:after {
      background: var(--ai-user--BorderColor);
    }
  }
  &.group {
    &:after {
      background: var(--ai-group--BorderColor);
    }
  }
  &.set-up {
    &:after {
      background: var(--ai-set-up--BorderColor);
    }
  }
  &.organize {
    &:after {
      background: var(--ai-organize--BorderColor);
    }
  }
  &.training {
    &:after {
      background: var(--ai-training--BorderColor);
    }
  }
  &.serving {
    &:after {
      background: var(--ai-serving--BorderColor);
    }
  }
  &.m-is-selectable {
    &:after {
      display: none;
      top: unset;
      bottom: 0;
      transform: rotate( -180deg );
    }
    &:hover {
      cursor: pointer;
    }
    &:hover, &.m-is-selected {
      &:after {
        display: block
      }
      &.project {
        border-color: var(--ai-project--BorderColor);
      }
      &.notebook {
        border-color: var(--ai-notebook--BorderColor);
      }
      &.pipeline {
        border-color: var(--ai-pipeline--BorderColor);
      }
      &.pipeline-run {
        border-color: var(--ai-pipeline--BorderColor);
      }
      &.cluster-storage {
        border-color: var(--ai-cluster-storage--BorderColor);
      }
      &.model-server {
        border-color: var(--ai-model-server--BorderColor);
      }
      &.data-connection {
        border-color: var(--ai-data-connection--BorderColor);
      }
      &.user {
        border-color: var(--ai-user--BorderColor);
      }
      &.group {
        border-color: var(--ai-group--BorderColor);
      }
      &.set-up {
        border-color: var(--ai-set-up--BorderColor);
      }
      &.organize {
        border-color: var(--ai-organize--BorderColor);
      }
      &.training {
        border-color: var(--ai-training--BorderColor);
      }
      &.serving {
        border-color: var(--ai-serving--BorderColor);
      }
    }
    &.m-is-selected {
      border-width: 2px;
      padding: 0;
    }
  }
}