/**
 * @provides phui-workcard-view-css
 */

.phui-workcard.phui-oi {
  background-color: {$page.content};
  border-radius: 3px;
  margin-bottom: 8px;
  border-left-width: 4px;
  box-sizing: border-box;
}

.phui-workcard .phui-oi-name {
  padding-bottom: 4px;
}

.phui-workcard .phui-oi-content {
  margin-top: 0;
}

.phui-workcard .phui-oi-frame {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-color: {$thinblueborder};
  border-bottom-color: {$lightblueborder};
}

.phui-workcard.phui-oi .phui-oi-objname {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  user-select: text;
}

.phui-workcard .phui-oi-link {
  white-space: normal;

  /* See T13413. This works around a Chrome 77 rendering engine freeze. */
  word-wrap: normal;

  font-weight: normal;
  color: {$blacktext};
  margin-left: 2px;
}

.phui-oi-disabled.phui-workcard {
  background-color: rgba({$alphawhite},.67);
}

.phui-oi-disabled.phui-workcard .phui-oi-link {
  color: {$greytext};
}

.device-desktop .phui-workcard .phui-oi-with-1-actions
  .phui-oi-content-box {
  margin-right: 0;
  overflow: hidden;
}

.phui-workcard .phui-oi-objname {
  vertical-align: top;
}

.device-desktop .phui-workcard .phui-list-item-icon {
  display: none;
}

.phui-workcard.phui-oi .phui-list-item-href {
  height: 24px;
  width: 24px;
}

.device-desktop .phui-workcard.phui-oi:hover
  .phui-list-item-href {
    background: #fff;
    opacity: .7;
}

.device-desktop .phui-workcard.phui-oi
  .phui-list-item-href:hover {
    background: {$sh-bluebackground};
    opacity: 1;
}

.device-desktop .phui-workcard.draggable-card {
  cursor: grab;
}

.jx-dragging .phui-workcard.draggable-card {
  cursor: grabbing;
}

.device-desktop .phui-workcard.undraggable-card {
  cursor: not-allowed;
}

.device-desktop .phui-workcard.phui-oi.not-editable:hover {
  background: {$sh-redbackground};
}

.device-desktop .phui-workcard.phui-oi.not-editable:hover
  .phui-list-item-href {
  border-radius: 3px;
  background: {$red};
}

.device-desktop .phui-workcard.phui-oi.not-editable:hover
  .phui-list-item-href .phui-icon-view {
  color: #fff;
}

.phui-workcard.phui-oi:hover .phui-list-item-icon {
  display: block;
}

.phui-workcard .phui-oi-attributes {
  margin-right: 12px;
}

.phui-workpanel-view .drag-ghost {
  margin-bottom: 8px;
}

.phui-workcard .phui-oi-cover-image {
  display: block;
  padding: 8px 8px 0 8px;
  width: 263px;
}

.phui-workcard.phui-oi.phui-workcard-upload-target {
  background-color: {$sh-greenbackground};
}

.phui-oi-list-view .phui-workcard:last-child {
  margin-bottom: 0;
}

.phui-workcard .phui-oi-attribute-spacer {
  display: none;
}

.phui-workcard .phui-workcard-points {
  margin: 0 4px 2px 0;
  display: inline-block;
}

.phui-workcard .phui-oi-attribute {
  display: inline;
}


/* - Draggable Colors --------------------------------------------------------*/

.phui-workcard.phui-oi.drag-clone {
  box-shadow: {$dropshadow};
  background-color: {$sh-greybackground};
}

.phui-workcard.phui-oi.drag-clone .phui-list-item-href {
  display: none;
}

.phui-workcard.drag-clone.phui-oi-bar-color-red {
  background-color: {$sh-redbackground};
}

.phui-workcard.drag-clone.phui-oi-bar-color-orange {
  background-color: {$sh-orangebackground};
}

.phui-workcard.drag-clone.phui-oi-bar-color-yellow {
  background-color: {$sh-yellowbackground};
}

.phui-workcard.drag-clone.phui-oi-bar-color-green {
  background-color: {$sh-greenbackground};
}

.phui-workcard.drag-clone.phui-oi-bar-color-blue {
  background-color: {$sh-bluebackground};
}

.phui-workcard.drag-clone.phui-oi-bar-color-indigo {
  background-color: {$sh-indigobackground};
}

.phui-workcard.drag-clone.phui-oi-bar-color-violet {
  background-color: {$sh-violetbackground};
}

.phui-workcard.drag-clone.phui-oi-bar-color-pink {
  background-color: {$sh-pinkbackground};
}

.phui-workcard.drag-clone.phui-oi-bar-color-sky {
  background-color: {$sh-bluebackground};
}