@import '../../../css/mixins.sass'


.projectButton
  +noSelect
  +regularCopy
  display: flex
  flex-direction: row
  min-height: 100px
  width: calc(100% - 100px)
  padding: 0 !important

  justify-content: left
  text-align: left

  border: 1px solid $ui-line-grey
  border-radius: 2px
  margin-bottom: 10px
  background-color: $white
  color: $black
  font-size: 14px

  cursor: pointer
  text-decoration: none

  &:first-of-type
    border-top: 1px solid $ui-line-grey

  .starContainer
    display: flex
    align-items: center
    padding-left: 25px
    padding-right: 10px

    .star
      opacity: 0.5
      color: $orange

      &.starred  
        opacity: 0.6

    &:hover .star
      opacity: 1

    &.starred:hover .star
      opacity: 0.8

  .projectButtonContent
    flex-grow: 1
    .projectButtonContentTop
      display: flex
      flex-direction: row
      height: 100%
      .projectLeft
        display: flex
        flex-direction: column
        justify-content: center
        width: 100%
        padding: 0px 16px

        .projectTitle
          font-size: 14px
          font-weight: bold

        .pullRight
          display: flex
          margin-left: auto
          > div:not(:first-of-type)
            margin-left: 5px

      .projectRight
        font-size: 12px
        display: flex

        .metadata
          display: flex
          flex-direction: row
          padding: 11px 0
          align-items: center
          flex-grow: 1

          .item
            display: flex
            flex-direction: column
            padding: 0 8px
            .label
              +smallCapsBold
              margin-right: 5px

            .value
              white-space: nowrap
              overflow: hidden
              text-overflow: ellipsis
              font-size: 16px
              text-align: center
              // font-weight: 600
              // text-align: center
              // font-size: 25px
    .projectButtonContentBottom
      padding: 0px 16px
      padding-bottom: 16px

      .label
        +smallCaps
      .values
        > div
          &:before
            content: "-"
            padding: 0 5px

  .expandButton
    position: relative
    display: flex
    width: center
    border-left: 1px solid $ui-line-grey
    align-items: center
    justify-content: center
    width: 35px
    height: 100%

    &.pt-popover-open
      background-color: $ui-header-grey
      &:before
        content: '\E655'

  &.showDatasets
    .projectButtonTop
      min-height: 70px


.projectButton.minimal
  $minimalHeight: 40px
  min-height: $minimalHeight
  line-height: $minimalHeight
  margin-bottom: -2px
  width: 100%
  align-items: center

  &.selected, &:hover
    box-shadow: inset 0 0 0 0px rgba(16, 22, 26, 0.2), inset 0 1px 1px rgba(16, 22, 26, 0.2)
    background-color: #d8e1e8
    background-image: none

  &.selected
    pointer-events: none

    .rightButtons
      pointer-events: all

  .projectButtonContent
    .projectButtonContentTop
      .projectTitle
        line-height: $minimalHeight
        font-weight: normal
  .rightButtons
    height: 30px
    margin-right: 10px
