@use "../abstracts/" as *;

.main-body {
  width: calc(100% - $sidebar-width);
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  padding: 20px;
  min-height: calc(100dvh - calc(72px + 43px));
  height: 100%;
  max-height: 100%;
  [data-page="chatPage"] & {
    padding: 0;
  }
  @include xxl-up {
    padding: 25px 35px;
  }
  @include lg-down {
    width: 100%;
  }
  @include sm-down {
    padding: 20px 15px;
  }

  .main-content {
    .page-header {
      margin-bottom: 25px;
      .page-header-left {
        > h2 {
          font-size: 24px;
          -webkit-margin-after: 5px;
          margin-block-end: 5px;
        }
        > p {
          color: $text-primary;
        }

        @at-root {
          .breadcrumb-wrapper {
            .breadcrumb-item {
              font-weight: 500;
              font-size: 15px;
              &.active {
                color: $text-primary;
              }
              > a {
                color: $color-primary;
              }
            }
          }
        }
      }
    }
  }
}

html:is(.menu-active) {
  .main-body {
    @include xl-up {
      width: calc(100% - calc($sidebar-width + $sub-menu-width));
      -webkit-transition: width 0.15s ease-in-out;
      -o-transition: width 0.15s ease-in-out;
      transition: width 0.15s ease-in-out;
    }
  }
}

.site-setting {
  position: fixed;
  inset-inline-end: 0;
  inset-block-end: 100px;
  > button {
    @include square($size: 40px);
    border-start-start-radius: $radius-4;
    border-end-start-radius: $radius-4;
    @include item-center;
    line-height: 1;
    font-size: 18px;
    background-color: $color-primary;
    color: $color-primary-text;
    > i {
      vertical-align: middle;
      -webkit-animation: spin 2s infinite linear;
      animation: spin 2s infinite linear;

      @include keyframes(spin) {
        0% {
          -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
          transform: rotate(0);
        }

        100% {
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
    }
  }
}
