#page_view {
  display: flex;
  flex-direction: column;

  height: 100%;

  .view-title {
    flex-shrink: 0;
  }

  .view-content {
    flex-grow: 1;

    display: flex;
    flex-direction: column;

    .top {
      flex-shrink: 0;

      .page-title-container {
        display: flex;
        align-items: center;

        width: 60%;

        margin-bottom: calculateRem(15);

        input[type=text] {
          flex-grow: 1;

          margin-right: calculateRem(20);
        }

        .component-dropdown {
          flex-shrink: 0;
        }
      }

      .permalink-container {
        display: flex;
        align-items: center;

        margin-bottom: calculateRem(15);

        span, a, input[type=text], i.fas {
          font-size: 14px;
        }

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

          input[type=text] {
            padding-top: 0;
            padding-right: calculateRem(5);
            padding-bottom: 0;
            padding-left: calculateRem(5);
          }
        }

        .icon-container {
          margin-left: calculateRem(15);
        }
      }
    }
    .page-builder-container {
      flex-grow: 1;

      width: 100%;

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

      background-color: #F6F6F6;

      &.empty {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .button-container {
        display: flex;
        justify-content: flex-end;

        width: 100%;
      }

      .component-picker {
        .tabs {
          display: flex;

          .tab {
            padding-top: calculateRem(15);
            padding-right: calculateRem(20);
            padding-bottom: calculateRem(15);
            padding-left: calculateRem(20);

            background-color: #A4A8AA;
            color: setTextColor(#A4A8AA);

            cursor: pointer;

            &:not(:last-child) {
              margin-right: calculateRem(2);
            }

            &:hover {
              background-color: mix(#A4A8AA, #E2E2E2, 50%);
              color: setTextColor(mix(#A4A8AA, #E2E2E2, 50%));
            }

            &.active {
              background-color: #E2E2E2;
              color: setTextColor(#E2E2E2);
            }
          }
        }
        .tab-view {
          padding-top: calculateRem(30);
          padding-right: calculateRem(25);
          padding-bottom: calculateRem(30);
          padding-left: calculateRem(25);

          background-color: #E2E2E2;

          .head {
            display: grid;
            grid-template-columns: 1fr 3fr 1fr;

            margin-bottom: calculateRem(40);

            .title {
              grid-column-start: 2;

              text-align: center;
            }

            .icon-container {
              color: $black;
              text-align: right;
            }
          }

          .category {
            .components-list {
              display: flex;
              flex-wrap: wrap;

              width: 100%;

              .component-selector {
                position: relative;

                width: calc(33.333333% - 13.33px);

                margin-bottom: calculateRem(20);

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

                cursor: pointer;

                &:not(:nth-child(3n)) {
                  margin-right: calculateRem(20);
                }

                &:hover {
                  background-color: $admin-primary-color;
                  color: setTextColor($admin-primary-color);

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

                &.placeholder {
                  &:after {
                    content: "";
                    display: block;

                    width: 100%;
                    padding-top: 50%;
                  }
                }

                .content-container {
                  position: absolute;

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

                  width: 100%;
                  height: 100%;

                  .name {
                    font-size: 20px;
                    font-weight: 600;
                    text-transform: uppercase;
                  }
                }
              }
            }
          }
        }
      }

      .empty-state {
        display: flex;
        flex-direction: column;
        
        & > h1 {
          margin-bottom: 0;

          text-align: center;
          font-size: 36px;
          line-height: 51px;
        }
        & > span {
          margin-bottom: calculateRem(20);

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

    .additional-container {
      margin-top: calculateRem(30);

      .additional-input-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;

        &:not(:last-child) {
          margin-bottom: calculateRem(25);
        }

        .label {
          padding-right: calculateRem(50);

          font-weight: 700;
        }

        .input {
          input, textarea {
            width: 100%;
          }
        }
      }
    }
  }
}