body.boards,
body.cards {
  .alert {
    margin-top: 1rem;
  }
}

body.boards.index {
  .board-actions {
    visibility: hidden;
    float: right;

    a {
      margin-left: 0.5rem;
      white-space: nowrap;
    }
  }

  .board-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .board-list-item {
    box-sizing: border-box;
    padding: 0 1rem 0.5rem 0;
    position: relative;
    width: 20%;

    &:hover {
      .board-actions {
        visibility: visible;
      }
    }

    &:nth-child(5n) {
      padding-right: 0;
    }

    @include media-breakpoint-down(lg) {
      padding-right: 0;
      width: 100%;
    }
  }

  .board-tile {
    background-color: $primary;
    border-radius: 3px;
    color: $white;
    display: block;
    line-height: 20px;
    padding: 0.5rem 0.75rem;
    transition: background-color 0.2s ease-in-out;

    &.board-new {
      background-color: darken($secondary-bg, 5%);
      color: $text-default;
      display: table-cell;
      height: 5rem;
      font-weight: 400;
      text-align: center;
      vertical-align: middle;
      width: inherit;
      transition: all 0.2s ease-in-out;

      &:hover {
        background-color: darken($secondary-bg, 10%);
      }

      @include media-breakpoint-down(lg) {
        display: block;
      }
    }

    &:hover {
      background-color: darken($primary, 5%);
    }

    .board-tile-details {
      display: block;
      min-height: 4rem;
    }

    .board-tile-details-name {
      font-size: 1rem;
      font-weight: 700;
      display: inline-block;
      max-height: 40px;
      overflow: hidden;
    }
  }

  .empty-state {
    &-docs-link {
      margin-bottom: 0.5rem;
    }
  }
}

body.boards.show {
  .board {
    background-color: lighten($primary-bg, 20%);
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    margin-bottom: 0;
    padding: 0;
  }

  .card {
    border: 1px solid $border-color;
    border-radius: 3px;
    margin-bottom: 0.25rem;
    max-width: 300px;
    min-height: 20px;

    .card-details {
      padding: 0.4rem 0.5rem 0.4rem 0.5rem;
      overflow: hidden;

      .card-members {
        float: right;

        .gravatar:last-child {
          margin-right: 0;
        }
      }

      .card-title {
        margin: 0;
      }
    }
  }

  .card-new {
    border-radius: 0 0 3px 3px;
    padding: 0.5rem 0.7rem;
    transition: all 0.2s ease-in-out;

    &:hover {
      background-color: darken($secondary-bg, 5%);
    }
  }

  .list {
    background-color: $secondary-bg;
    border: 1px solid $border-color;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 0.25rem;
    max-height: 71.4vh;
    min-width: 17rem;
    cursor: pointer;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }

    .list-cards {
      margin: 0 0.25rem;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 0 0.25rem;
      min-height: 30px;
    }

    .list-header {
      flex: 0 0 auto;
      padding: 0.5rem 0.7rem;

      &:hover {
        .list-actions {
          visibility: visible;
        }
      }

      .list-actions {
        visibility: hidden;

        a {
          margin-right: 0.25rem;
        }
      }
    }
  }

  .list-new {
    background-color: $primary;
    border: none;
    border-radius: 3px;
    padding: 0.25rem;

    a {
      color: $white;
      padding: 0.4rem;
    }

    &:hover {
      background-color: darken($primary, 5%);
    }
  }

  .page-title {
    display: none;
  }

  .sortable-placeholder {
    background-color: darken($secondary-bg, 10%);
    border-radius: 3px;
    margin-bottom: 0.4rem;
  }

  .ui-sortable-helper {
    box-shadow: 0 20px 30px 0 rgba(33, 55, 74, 0.2);
    cursor: grabbing;

    a {
      cursor: grabbing;
    }
  }
}

body.cards.edit,
body.cards.new {
  .card_assignees {
    border-top: 1px solid $border-color;
    padding-top: 2rem;

    @media (max-width: 991px) {
      margin-top: 2rem;
    }
  }
}

body.cards.show {
  .card-assignees {
    .gravatar {
      margin-bottom: 0.5rem;
    }
  }
}
