openfoodfoundation/openfoodnetwork

.producers {
  .active_table .active_table_node {
    // Header row
    @include breakpoint(phablet) {
      .active_table_row {
        display: inline-block;
        width: 100%;
      }

      .skinny-head {
        background-color: $clr-turquoise-light;

        @include border-radius-mixed(0.5em, 0.5em, 0, 0);

        margin-top: -1rem;
        margin-bottom: 1rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
      }

      .follow-icons {
        &, & * {
          font-size: 1.5rem;
        }
      }
    }

    // Producer icons
    i.ofn-i_059-producer, i.ofn-i_060-producer-reversed {
      font-size: 2rem;
      display: inline-block;
      margin-right: 0.25rem;
      float: left;
      color: $clr-turquoise;
    }

    .vertical-align-middle {
      display: flex;
      align-items: center;
    }

    a {
      &:hover, &:active, &:focus {
        color: $clr-turquoise-bright;

        span {
          text-decoration: underline;
        }
      }

      &.is_distributor, &.is_distributor i.ofn-i_059-producer, &.is_distributor i.ofn-i_060-producer-reversed {
        color: $clr-brick;

        &:hover, &:active, &:focus {
          color: $clr-brick-bright;
        }
      }
    }

    a.cta-hub {
      &:hover, &:focus, &:active {
        &.secondary {
          color: #666;

          .hub-name, .button-address {
            border-bottom: 1px solid #999;
          }
        }

        &.primary {
          color: $clr-brick-bright;

          .hub-name, .button-address {
            border-bottom: 1px solid $clr-brick-bright;
          }
        }
      }
    }

    p.word-wrap {
      margin-bottom: 0;

      &:last-child {
        margin-bottom: 1rem;
      }
    }

    .fat-taxons {
      background-color: $clr-turquoise-light;
    }

    .fat-properties {
      background-color: $clr-turquoise-ultra-light;
      border: 1px solid $clr-turquoise-light;
    }

    .producer-name {
      color: $clr-turquoise;
    }

    //Open row
    &.open {
      .active_table_row {
        border-left: 1px solid $clr-turquoise-bright;
        border-right: 1px solid $clr-turquoise-bright;
        background-color: rgba(206, 239, 228, 0.4);

        .cta-container {
          background: none;
        }

        .columns img {
          padding: 1rem 0;
          max-height: 160px;
          width: auto;

          &.left {
            padding: 0.25rem 1rem 0.25rem 0;
          }

          &.right {
            padding: 0.25rem 0.5rem 0.25rem 2rem;
          }
        }
      }

      .active_table_row:first-child {
        border-top: 1px solid $clr-turquoise-bright;
      }

      .active_table_row:last-child {
        border-bottom: 1px solid $clr-turquoise-bright;
        cursor: auto;
      }
    }

    //Closed row
    &.closed {
      .active_table_row.closed {
        border: 1px solid transparent;

        @include breakpoint(phablet) {
          border-color: $clr-turquoise-light;
        }

        &:hover, &:active, &:focus {
          border-color: $clr-turquoise;
        }
      }
    }
  }
}