.md-text .tag-plugin.okr
  position: relative
  border-radius: $border-card
  background: var(--theme-block)
  if hexo-config('tag_plugins.okr.border') == true
    border: 1px solid var(--theme-border)
  overflow: hidden
  color: var(--text-p1)
  line-height: 1.5
  .o
    .title
      font-size: $fs-15
    .note
      font-size: $fs-14
      p
        font-size: $fs-14
  .kr
    .title
      font-size: $fs-14
    .note
      font-size: $fs-14
      p,li,.tag-plugin
        font-size: $fs-14

  .title
    font-weight: 600
    display: block
  .note
    font-weight: 400
    display: block
    margin-top: 0.5rem
    >p,>ul
      margin-top: 0.25rem
      margin-bottom: 0.25rem
    >.tag-plugin
      margin-top: 0.25rem
      margin-bottom: 0.25rem
    >*:last-child
      margin-bottom: 0
  .status 
    font-size: $fs-12
    padding: 2px 4px
    border-radius: 2px
  .okr-item.o
    border-bottom: 4px solid var(--block-border)
  .okr-item.kr+.okr-item.kr
    border-top: 1px dashed var(--block-border)

.tag-plugin.okr .okr-item
  display: grid
  grid-template-columns: 3.2rem auto 100px
  grid-column-gap: 0.75rem
  padding: 1rem
  .okr-left .title
    background: var(--card)
    border-radius: 1rem
    text-align: center
    padding: 0 0.5rem
  .labels
    display: flex
    justify-content: space-between
    align-items: flex-start
    position relative
    flex-wrap: wrap
    .label
      background: var(--theme-block)
      color: var(--text-p1)

  .progress
    margin-top: 4px
    height: 4px
    border-radius: 2px
    position: relative
    background: var(--card)
    .fill
      position: absolute
      background: var(--theme)
      border-radius: 2px
      top: 0
      left: 0
      bottom: 0
      &:before
        content: ''
        position absolute
        top: -4px
        bottom: -4px
        right: -4px
        width: 8px
        height: 12px
        border-radius: 8px
        background: white
        box-shadow: $boxshadow-button
      &:after
        content: ''
        position absolute
        top: -2px
        bottom: -2px
        right: -2px
        width: 4px
        height: 8px
        border-radius: 4px
        background: var(--theme)
        

@media screen and (max-width: $device-mobile-max)
  .tag-plugin.okr .okr-item
    grid-template-columns: 2.8rem auto 50px
    grid-column-gap: 0.5rem
    padding: 0.5rem
    .okr-left .title
      padding: 0 0.25rem
    .label
      txt-ellipsis()