#page_view {
  .view-content {
    .page-builder-container {
      .component-group {
        &.groupable {
          margin-bottom: calculateRem(30);

          .row {
            .component-container {
              margin-bottom: 0;
            }
          }
        }

        &.card-component-group {
          @include alwaysThirds();
        }

        &.clickable-object-component-group {
          @include rowsOfFour();
        }

        &.complex-button-component-group,
        &.side-by-side-component-group,
        &.text-component-group {
          @include rowsOfTwo();
        }

        .row {
          &:not(:last-child) {
            margin-bottom: calculateRem(30);
          }

          .component-headers, .component-container {
            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;

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

              background-color: $admin-primary-color;
              color: setTextColor($admin-primary-color);

              cursor: pointer;

              &.mid-gray {
                background-color: $builda-midgray;
                color: setTextColor($builda-midgray);
              }

              &.closed {
                background-color: $builda-gray;
                color: setTextColor($builda-gray);
                a {
                  color: setTextColor($builda-gray);
                }
              }

              a {
                color: setTextColor($admin-primary-color);
              }

              .left {
                display: flex;
                align-items: center;

                .move-container {
                  display: flex;
                  flex-direction: column;

                  margin-right: calculateRem(15);

                  .icon-container {
                    line-height: 1;
                    i {
                      font-size: 12px;
                    }
                  }
                }

                .name {
                  font-weight: 600;
                  text-transform: uppercase;
                }
              }
              .right {
                position: relative;

                .component-actions {
                  position: absolute;
                  top: calc(100% + 10px);
                  right: -17px;

                  background-color: #BCC0C8;

                  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.27);

                  z-index: 11;

                  .grid-container {
                    display: grid;
                    grid-template-columns: 90px 90px;
                    grid-template-rows: 90px 90px;
                    grid-template-areas:
                        "topLeft topRight"
                        "bottomLeft bottomRight";
                    grid-gap: 1px;

                    position: relative;

                    &:before {
                      content: " ";

                      position: absolute;
                      bottom: 100%;
                      right: 17px;

                      height: 0;
                      width: 0;

                      border: solid transparent;
                      border-width: 10px;
                      border-bottom-color: $builda-midgray;
                    }

                    .action {
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;

                      background-color: $builda-midgray;
                      color: setTextColor($builda-midgray);

                      cursor: pointer;

                      &:hover {
                        background-color: #5C636A;
                        color: setTextColor(#5C636A);
                      }

                      &.duplicate {
                        grid-area: topLeft;
                      }

                      &.delete {
                        grid-area: topRight;
                      }

                      &.save-to-vault {
                        grid-area: bottomLeft;
                      }

                      &.ungroup {
                        grid-area: bottomRight;
                      }

                      span.text {
                        text-align: center;
                        font-size: 10px;
                        line-height: 13px;
                      }
                    }
                  }
                }
              }
            }
          }

          .component-container {
            width: 100%;

            margin-bottom: calculateRem(30);

            .body {
              border: solid 1px $admin-primary-color;

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

              background-color: $background-white;
            }
          }
        }
      }
    }
  }
}