.group.directory-group {
  .row.directory-row {
    .directory {
      @include breakpoint(laptop) {
        flex-flow: row wrap;
        justify-content: space-between;
      }

      &.table-view {
        @include breakpoint(laptop) {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          height: calculateRem(500);
          width: 100%;
        }

        .first-card {
          width: 0;

          visibility: hidden;

          @include breakpoint(mobile) {
            width: 100%;

            margin-bottom: calculateRem(30);

            padding-top: calculateRem(30);
            padding-right: calculateRem(20);
            padding-bottom: calculateRem(30);
            padding-left: calculateRem(20);
          }

          @include breakpoint(laptop) {
            width: 0;

            margin-bottom: 0;

            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
          }
          &.visible {
            padding-top: calculateRem(50);
            padding-right: calculateRem(25);
            padding-bottom: calculateRem(50);
            padding-left: calculateRem(25);

            visibility: visible;

            @include breakpoint(laptop) {
              width: calc(33.3333333%);

              overflow-y: scroll;
            }
          }
        }

        .person-card {
          @include breakpoint(mobile) {
            width: 100%;

            margin-bottom: calculateRem(30);

            padding-top: calculateRem(30);
            padding-right: calculateRem(20);
            padding-bottom: calculateRem(30);
            padding-left: calculateRem(20);
          }

          @include breakpoint(laptop) {
            display: none;
            width: 0;
          }

          &.not-initial-card {
            display: none;
          }
        }

        & > .content {
          @include breakpoint(mobile) {
            display: none;
          }

          @include breakpoint(laptop) {
            display: flex;
            height: 100%;
            width: 0;

            visibility: hidden;
          }

          &.visible {
            @include breakpoint(laptop) {
              width: calc(66.6666666%);

              visibility: visible;
            }
          }

          .initial {
            display: flex;
            flex-direction: column;
            justify-content: center;

            height: 100%;
            width: 100%;

            .container {
              position: relative;
              align-self: center;

              .icon {
                position: absolute;
                top: -80px;

                width: 100%;

                text-align: center;

                i {
                  font-size: 180px;
                }
              }
              .message {
                position: relative;

                text-align: center;
                font-size: 24px;
              }
            }
          }

          .table-container {
            width: 100%;

            transition: width 0.3s ease;

            table {
              thead {
                border-bottom-style: solid;
                border-bottom-width: 1px;
                th {
                  padding-top: calculateRem(10);
                  padding-right: calculateRem(20);
                  padding-bottom: calculateRem(10);
                  padding-left: calculateRem(20);

                  text-align: left;
                }
              }
              tbody {
                tr {
                  cursor: pointer;

                  td {
                    padding-right: calculateRem(20);
                    padding-left: calculateRem(20);

                    border-bottom-style: solid;
                    border-bottom-width: 1px;

                    line-height: 1.5;
                  }
                }
              }
            }
          }
        }

        .person-container {
          visibility: hidden;

          transition: width 0.3s ease;

          @include breakpoint(mobile) {
            display: none;
          }

          @include breakpoint(laptop) {
            display: flex;
            flex-direction: column;

            width: 0;
          }

          &.visible {
            width: 100%;

            padding-top: calculateRem(40);
            padding-right: calculateRem(50);
            padding-bottom: calculateRem(40);
            padding-left: calculateRem(50);

            visibility: visible;
          }

          &.no-bio {
            .content {
              .middle {
                display: none;
              }
              .right-side {
                .places {
                  display: flex;
                  flex-wrap: wrap;

                  .place {
                    margin-right: calculateRem(50);
                  }
                }
              }
            }
          }

          .icon-container {
            flex-shrink: 0;

            i {
              font-size: calculateRem(20);
              cursor: pointer;
            }
          }

          .content {
            flex-grow: 1;
            display: flex;

            width: 100%;

            margin-top: calculateRem(40);

            overflow: hidden;

            .left-side {
              flex-shrink: 0;

              width: 30%;

              padding-right: calculateRem(50);
            }
            .middle {
              width: 40%;

              padding-right: calculateRem(50);

              overflow-y: auto;
            }
            .right-side {
              flex-grow: 1;

              overflow-y: auto;

              .places {
                .place {
                  .name {
                    font-weight: 700;
                  }
                  .address {
                    font-weight: 400;

                    & + .phone-number {
                      margin-top: calculateRem(15);
                    }
                  }
                }
              }
            }
          }
        }
      }

      &.card-view {
        .first-card, .person-card {
          margin-bottom: calculateRem(30);

          padding-top: calculateRem(30);
          padding-right: calculateRem(20);
          padding-bottom: calculateRem(30);
          padding-left: calculateRem(20);

          @include breakpoint(mobile) {
            width: 100%;
          }

          @include breakpoint(laptop) {
            width: calc(33.3333333% - 15px);
            min-height: calculateRem(180);
          }
        }

        .person-card {
          cursor: pointer;

          .basic-info {
            .person {
              .content {
                .first-place {
                  @include breakpoint(laptop) {
                    display: none;
                  }
                }
              }
            }
          }

          .show-additional {
            @include breakpoint(laptop) {
              display: none;
            }
          }
        }
      }

      &.card-view, &.table-view {
        .first-card {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .person-card {
          .basic-info {
            display: flex;
            justify-content: space-between;

            height: 100%;

            .person {
              align-self: center;
              width: calc(65% - 20px);
              .title {
                h4 {
                  margin-bottom: calculateRem(4);
                }
              }
              .content {
                .position {
                  font-weight: 600;
                }
                .places {
                  @include breakpoint(mobile) {
                    display: none;
                  }

                  @include breakpoint(laptop) {
                    display: block;
                  }
                }
              }
            }
            .image-container {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;

              width: 35%;
              i {
                font-size: 100px;
              }
            }
          }
          .additional-info {
            display: none;
            .places {
              .place {
                &:not(:last-child) {
                  margin-bottom: calculateRem(15);
                }
                &:first-child {
                  margin-top: calculateRem(10);
                }

                .name {
                  font-weight: 700;
                }
                .address {
                  font-weight: 400;

                  & + .phone-number {
                    margin-top: calculateRem(15);
                  }
                }
              }
            }
            .bio {
              margin-top: calculateRem(10);
            }
          }
          .show-additional {
            margin-top: calculateRem(15);

            text-align: center;
          }
        }
        .show-more-text {
          @include breakpoint(laptop) {
            display: none;
          }

          p {
            text-align: center;
          }
        }
      }

      .modal-mask {
        position: fixed;
        top: 0;
        left: 0;

        display: none;

        width: 100%;
        height: 100%;

        z-index: 9998;

        transition: opacity 0.3s ease;

        .modal-wrapper {
          display: table-cell;
          vertical-align: middle;

          .modal {
            display: flex;
            flex-direction: column;

            width: calculateRem(1000);
            max-height: 80vh;

            border-radius: 2px;

            margin: 0 auto;

            padding-bottom: calculateRem(70);

            background-color: $dark-gray;

            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);

            color: $light;

            overflow: hidden;

            .top-bar {
              display: flex;
              justify-content: flex-end;

              margin-bottom: calculateRem(50);

              padding-top: calculateRem(20);
              padding-right: calculateRem(40);
              padding-left: calculateRem(40);

              .close {
                color: inherit;
              }
            }

            .person {
              padding-right: calculateRem(100);
              padding-left: calculateRem(100);

              overflow-y: auto;
              .top {
                display: flex;
                justify-content: space-between;
                .left-side, .right-side {
                  width: 45%;
                }
                .left-side {
                  h4.name {
                    margin-bottom: calculateRem(4);
                  }
                  p.position {
                    margin-bottom: calculateRem(4);

                    font-weight: 700;
                  }

                  .places {
                    margin-top: calculateRem(15);
                    .place {
                      margin-bottom: calculateRem(20);
                      .name {
                        font-weight: 700;
                      }
                      .address {
                        font-weight: 400;

                        & + .phone-number {
                          margin-top: calculateRem(15);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
