.endpoint-card-header {
  position: relative;
  display: grid;
  grid-template-columns: 40% auto 4%;
  border-radius: 12px;
  align-items: center;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.25s ease;
}

.endpoint-card-header-get {
  border: 2px solid var(--get-color);
  background-color: color-mix(in srgb, var(--get-color), white 90%);
}

.endpoint-card-header-get:hover {
  background-color: color-mix(in srgb, var(--get-color), white 70%);
}

.endpoint-card-header-query {
  border: 2px solid var(--query-color);
  background-color: color-mix(in srgb, var(--query-color), white 90%);
}

.endpoint-card-header-query:hover {
  background-color: color-mix(in srgb, var(--query-color), white 70%);
}

.selected-header {
  background-color: color-mix(in srgb, inherit, white 50%);
}

.request-main-info {
  display: flex;
  align-items: center;
}

.request-type-block {
  color: var(--primary-color);
  justify-self: center;
  padding: 6px 15px 6px 15px;
  border-radius: 4px;
  margin: 10px 15px 10px 15px;
  user-select: none;
}

.request-type-block-get {
  background-color: var(--get-color);
}

.request-type-block-query {
  background-color: var(--query-color);
}

polyline {
  stroke: var(--secondary-color);
}

.header-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-self: end;
  width: 25rem;
  text-align: right;
}

.header-arrow {
  justify-self: center;
  align-self: center;
  transform: scaleY(1);
  transition: transform 0.3s ease;
}

.selected-header .header-arrow {
  transform: scaleY(-1);
}