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

.datasetDataRow
  display: flex
  flex-direction: row
  position: relative
  border: 1px solid $ui-line-grey
  margin-top: -1px
  background-color: white
  width: calc(100% - 30px)
  min-width: 600px
  min-height: 80px
  height: 80px

  &:first-child
    border-top-right-radius: 3px
    border-top-left-radius: 3px
  &:last-child
    border-bottom-right-radius: 3px
    border-bottom-left-radius: 3px

  div.metadata
    display: flex
    flex-direction: row
    flex-grow: 1
    padding: 0 20px

    .nameAndType
      display: flex
      flex-direction: column
      justify-content: center
      font-size: 14px

    div.name, div.type
      display: flex
      align-items: center
      text-overflow: ellipsis

    div.name
      font-weight: bold
      min-width: 200px
      font-size: 14px
      line-height: 14px
      text-overflow: ellipsis

    div.type
      min-width: 80px
      margin-right: 20px
      padding-top: 10px
      padding-left: 0px

      .prefixIcon
        margin-right: 5px

    div.statistics
      display: flex
      margin-left: auto

      div.statistic
        display: flex
        flex-direction: column
        justify-content: center
        text-align: center
        white-space: wrap

        min-width: 100px
        width: 100px

        &.wide
          min-width: 160px
          width: 160px

        .field
          +smallCapsBold
          // color: $small-caps-grey

        .value
          font-size: 14px
          &.inlineElements
            display: flex
            justify-content: center

          .inline
            display: inline

    div.toggles
      +smallCaps
      display: flex
      text-align: center
      .left
        display: flex
        flex-direction: column
        justify-content: center

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

    .dropdown
      position: absolute
      opacity: 0
      user-select: none
      pointer-events: none
      top: 75px
      right: 0
      background-color: white
      z-index: 100
      min-width: 150px

      border: 1px solid $ui-line-grey
      border-radius: 3px
      position: absolute
      padding: 3px 0px

      .separator
        margin: 3px 12px
        border-bottom: 1px solid $ui-line-grey
        height: 0px
        max-height: 0px

      .dropdownOption
        padding: 8px 12px
        cursor: pointer

        &:hover
          background-color: $primary-accent
          color: white

    &:hover
      background-color: $ui-header-grey

  .fieldTypeDropDown.dropDownMenu
    margin-top: -5px
    margin-left: -10px
