.igloo-customer-layout-small,
.igloo-customer-layout-middle,
.igloo-customer-layout-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  overflow: auto;

  .igloo-layout-header {
    width: 100%;
    background: #f6f6ff;
    border-bottom: 1px solid #eeeeee;

    .header-content {
      width: 100%;
      min-height: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;

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

        .igloo-logo {
          width: 64px;
          height: 36px;
          background: url(./logo.svg) no-repeat;
          background-size: contain;
          margin-right: 40px;
        }

        .menu-item {
          cursor: pointer;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          padding: 16px 0px;
          margin-right: 40px;

          .ant-badge {
            display: flex;
            margin-left: 1px;

            .ant-badge-status-dot {
              top: 0px;
              margin-left: 1px;
            }

            .ant-badge-status-text {
              display: none;
            }

            .ant-scroll-number,
            .ant-badge-count {
              height: 16px;
              min-width: 16px;
              margin-left: 1px;
              margin-top: -6px;
              padding: 0;

              .ant-scroll-number-only {
                display: flex;
                height: 16px;
                align-items: center;
                justify-content: center;

                .ant-scroll-number-only-unit {
                  font-size: 10px;
                  line-height: 10px;
                  text-align: center;
                }
              }
            }
          }

          .active-menu {
            color: #5858ff;
            position: relative;

            &::after {
              content: '';
              position: absolute;
              width: 100%;
              height: 3px;
              background-color: #5858ff;
              left: 0;
              bottom: -16px;
            }
          }
        }
      }
    }

    .header-content-noSpaceBetween {
      justify-content: unset;
    }
  }

  .igloo-layout-center {
    flex: 1;
    padding: 0px 16px;
    width: 100%;
    background-color: #f9f9f9;

    .igloo-layout-content {
      width: 100%;
      margin: 0 auto;
    }
  }

  .igloo-layout-footer {
    width: 100%;
    background-color: #f6f6ff;

    .footer-content {
      width: 100%;
      padding: 32px 0px;
      color: #424242;
      margin: 0 auto;

      .footer-top {
        display: flex;
        & > div {
          flex: 1;
        }

        .top-left {
          .igloo-logo {
            left: 16px;
            top: 16px;
            width: 64px;
            height: 36px;
            background: url(./logo.svg) no-repeat;
            background-size: contain;
          }

          & > img {
            width: 64px;
            object-fit: contain;
            margin-right: 40px;
          }
        }

        .no-address-info {
          margin-right: 32px;

          .info-container {
            display: flex;

            .info-span {
              white-space: pre-wrap;
            }

            .igloo-icon {
              margin-right: 16px;
              color: @black;
              font-size: 24px;
            }

            &:not(:last-child) {
              margin-bottom: 16px;
            }
          }
        }
      }

      .footer-divider {
        margin: 36px 0px 24px 0px;
        width: 100%;
        height: 1px;
        background-color: #eeeeee;
      }

      .footer-bottom {
        margin-top: 24px;
        display: flex;
        justify-content: space-between;
        color:  @icon-color;
      }
    }
  }
}

.igloo-customer-layout-small {
  .igloo-layout-content,
  .igloo-layout-header .header-content,
  .igloo-layout-footer .footer-content {
    max-width: 720px;
  }
}
.igloo-customer-layout-middle {
  .igloo-layout-content,
  .igloo-layout-header .header-content,
  .igloo-layout-footer .footer-content {
    max-width: 960px;
  }
}
.igloo-customer-layout-big {
  .igloo-layout-content,
  .igloo-layout-header .header-content,
  .igloo-layout-footer .footer-content {
    max-width: 1140px;
  }
}

.igloo-customer-mobile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  overflow: auto;

  & > div {
    width: 100%;
  }

  .igloo-layout-header-fix {
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .igloo-layout-header {
    flex: 0 0 auto;
    background-color: #f6f6ff;
    padding: 0px 16px;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;

    .igloo-logo {
      width: 44px;
      height: 24px;
      background: url(./logo.svg) no-repeat;
      background-size: contain;
      margin-right: 40px;
    }
  }

  .igloo-layout-menu {
    background-color: #f6f6ff;
    height: 56px;
    text-align: center;
    flex: 0 0 auto;

    .menu-item {
      display: flex;
      align-items: center;
      justify-content: center;

      .ant-badge {
        display: flex;
        margin-left: 1px;

        .ant-badge-status-dot {
          top: 0px;
          margin-left: 1px;
        }

        .ant-badge-status-text {
          display: none;
        }

        .ant-scroll-number,
        .ant-badge-count {
          height: 16px;
          min-width: 16px;
          margin-left: 1px;
          margin-top: -6px;
          padding: 0;

          .ant-scroll-number-only {
            display: flex;
            height: 16px;
            align-items: center;
            justify-content: center;

            .ant-scroll-number-only-unit {
              font-size: 10px;
              line-height: 10px;
              text-align: center;
            }
          }
        }
      }

      .active-menu {
        color: #5858ff;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 3px;
          background-color: #5858ff;
          left: 0;
          bottom: -16px;
        }
      }
    }
  }

  .igloo-layout-center {
    background-color: #f9f9f9;
    padding: 0px 16px;
    flex: 1;

    .igloo-layout-content {
      width: 100%;
      margin: 0 auto;
    }
  }

  .igloo-layout-footer {
    background-color: #f6f6ff;
    padding: 24px 16px;

    .footer-content {
      width: 100%;
      margin: 0 auto;

      & > img {
        width: 44px;
        margin-bottom: 8px;
        object-fit: contain;
      }

      .igloo-logo {
        width: 44px;
        height: 24px;
        background: url(./logo.svg) no-repeat;
        background-size: contain;
        margin-bottom: 8px;
      }

      .compony-info {
        margin-top: 24px;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #eeeeee;

        .info-item {
          display: flex;
          align-items: flex-start;

          .info-span {
            white-space: pre-wrap;
          }

          &:not(:last-child) {
            margin-bottom: 8px;
          }

          .igloo-icon {
            font-size: 24px;
            margin-right: 16px;
          }

          & > div {
            color: #424242;
          }
        }
      }

      .compony-info-without-icon {
        margin-top: 0;
      }

      .footer-bottom {
        text-align: center;
        color:  @icon-color;
      }
    }
  }
}

.igloo-customer-mobile-container {
  .igloo-layout-content,
  .igloo-layout-footer .footer-content {
    min-width: 288px;
  }
}

.igloo-customer-mobile-container-with-panel {
  height: calc(~'100vh' - 48px);
  overflow: auto;
}