@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$layout: () !default;
$layout: map.merge(
  (
    view-height: 100vh,
    aside-z-index: calc(#{value('z-index-popper')} + 101),
    aside-width: 240px,
    aside-bg-color: value('bg-color-base'),
    aside-b-color: value('border-color-light-2'),
    aside-border: value('border-shape') value('layout-aside-b-color'),
    header-z-index: calc(#{value('z-index-popper')} + 100),
    header-height: 55px,
    header-bg-color: value('bg-color-base'),
    header-b-color: value('border-color-light-2'),
    header-border: value('border-shape') value('layout-header-b-color'),
    main-bg-color: transparent,
    footer-bg-color: value('fill-color-background')
  ),
  $layout
);

.#{$namespace}-layout {
  &-vars {
    @include define-preset-values('layout', $layout);
  }

  @include basis {
    width: 100%;
    height: 100%;
  }

  @include inherit-color;

  &__wrapper {
    position: relative;
    display: flex;
    min-height: value('layout-view-height');

    &--fixed {
      height: value('layout-view-height');
    }
  }

  &--no-aside &__wrapper,
  &--header-main &__wrapper {
    flex-direction: column;
  }

  &__sidebar {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    z-index: value('layout-aside-z-index');
    display: flex;
    pointer-events: none;
  }

  &__aside {
    @include basis {
      position: sticky;
      top: 0;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      width: value('layout-aside-width');
      max-height: value('layout-view-height');
      pointer-events: all;
      background-color: value('layout-aside-bg-color');
      border-inline-end: value('layout-aside-border');
      transition:
        width value('transition-base'),
        value('transition-background'),
        value('transition-border'),
        value('transition-transform');
      transform: translateX(-100%);
      will-change: width, transform;
    }

    @include inherit-color;

    @include rtl {
      transform: translateX(100%);
    }

    &--fixed {
      z-index: 1;
      transform: translateX(0);

      @include rtl {
        transform: translateX(0);
      }
    }

    &--expanded {
      transform: translateX(0);

      @include rtl {
        transform: translateX(0);
      }
    }

    &--reduced {
      width: 64px;
    }

    &--no-sign#{&}--fixed {
      top: value('layout-header-height');
      max-height: calc(#{value('layout-view-height')} - #{value('layout-header-height')});
    }

    &-top {
      display: flex;
      flex-shrink: 0;
      width: 100%;
    }

    &-main {
      display: flex;
      flex: 1 0 0%;
      width: 100%;
    }

    &-bottom {
      display: flex;
      flex-shrink: 0;
      width: 100%;
    }

    .#{$namespace}-menu {
      margin-top: 10px;
      border-inline-end: 0;
    }
  }

  &--locked &__aside {
    transition-duration: 0ms;
  }

  &__section {
    position: relative;
    width: 100%;
    min-height: calc(#{value('layout-view-height')} - #{value('layout-header-height')});
    transition: padding-inline-start value('transition-base');

    &--away {
      padding-inline-start: value('layout-aside-width');
    }

    &--away#{&}--reduced {
      padding-inline-start: 64px;
    }
  }

  &--header-main &__section {
    height: auto;
  }

  &--no-aside &__section {
    min-height: value('layout-view-height');
    padding-inline-start: 0;
  }

  &--locked &__section {
    transition-duration: 0ms;
  }

  &__header {
    @include basis {
      position: sticky;
      inset-inline-start: 0;
      top: 0;
      z-index: value('layout-header-z-index');
      display: flex;
      align-items: center;
      width: 100%;
      height: value('layout-header-height');
      padding: 0 16px;
      background-color: value('layout-header-bg-color');
      border-bottom: value('layout-header-border');
      transition:
        height value('transition-base'),
        value('transition-background'),
        value('transition-border'),
        value('transition-transform');
    }

    @include inherit-color;

    &--affixed {
      transform: translateY(-100%);
    }

    &--away {
      position: relative;
    }

    &-left {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      height: 100%;
    }

    &-main {
      display: flex;
      flex: 1 0 0%;
      align-items: center;
      min-width: 0;
      height: 100%;
    }

    &-right {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      height: 100%;
    }

    .#{$namespace}-menu {
      width: 100%;
      height: 100%;

      & > .#{$namespace}-menu__item {
        height: value('layout-header-height');
      }
    }
  }

  &__scrollbar {
    top: value('layout-header-height');
  }

  &--no-header &__scrollbar {
    top: 0;
  }

  &__main {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: value('layout-main-bg-color');

    &--fixed {
      height: calc(100% - var(--vxp-layout-header-height));
      overflow: hidden;
    }
  }

  &--no-header &__main--fixed,
  &--header-main &__main--fixed {
    height: 100%;
  }

  &__footer {
    @include basis {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      background-color: value('layout-footer-bg-color');
    }

    @include inherit-color;
  }

  &__sign {
    display: flex;
    align-items: center;
    height: value('layout-header-height');
    cursor: pointer;
    transition: height value('transition-base');

    &-name {
      width: calc(100% - 64px);
      overflow: hidden;
      font-size: value('font-size-primary');
      font-weight: bold;
      white-space: nowrap;
      user-select: none;
      opacity: 100%;
      transition:
        width value('transition-base'),
        value('transition-opacity');
    }
  }

  &__header &__sign {
    padding-inline-end: 16px;
    margin-inline-start: -16px;

    &--logo-only {
      padding-inline-end: 0;
    }
  }

  &--header-main &__sign {
    min-width: value('layout-aside-width');
  }

  &--no-aside &__sign {
    min-width: 0;
  }

  &__aside--reduced &__sign-name {
    width: 0;
    opacity: 0%;
  }

  &__logo {
    width: 64px;
    height: 100%;
    max-height: 32px;
    text-align: center;

    img {
      height: 100%;
    }
  }

  &__reduce-handler {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    cursor: pointer;
    border-top: value('layout-aside-border');
  }

  &__expand-handler {
    position: absolute;
    inset-inline-start: 100%;
    bottom: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 30px;
    color: value('content-color-third');
    cursor: pointer;
    background-color: value('layout-aside-bg-color');
    border: value('layout-aside-border');
    border-radius: 0 value('radius-base') value('radius-base') 0;
  }

  &__aside--fixed &__expand-handler {
    display: none;
  }

  &__aside--expanded &__expand-handler {
    .#{$namespace}-icon {
      transform: rotate(180deg);
    }
  }

  &__user {
    .#{$namespace}-dropdown__trigger {
      padding-inline-end: 4px;
      margin-inline-end: -4px;
      cursor: pointer;
    }

    &-profile {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 32px;
      padding: 5px 16px;
      margin-bottom: 10px;
      white-space: nowrap;
      list-style: none;
      background-color: transparent;

      &::after {
        position: absolute;
        inset-inline-start: 0;
        bottom: calc(-5px - 0.5px);
        display: block;
        width: 100%;
        height: 0;
        content: '';
        border-bottom: value('dropdown-divider');
      }
    }

    &-email {
      margin-top: 2px;
      color: value('content-color-secondary');
    }

    &-action {
      display: flex;
      align-items: center;
      line-height: 1;
    }
  }

  &__config {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 5px 16px;
    margin-bottom: 10px;
    white-space: nowrap;
    list-style: none;
    background-color: transparent;

    &::after {
      position: absolute;
      inset-inline-start: 0;
      bottom: calc(-5px - 0.5px);
      display: block;
      width: 100%;
      height: 0;
      content: '';
      border-bottom: value('dropdown-divider');
    }

    &-label {
      margin-bottom: 8px;
      user-select: none;
    }

    &-unit {
      display: flex;
      flex-wrap: wrap;
      max-width: 220px;
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  &__brief-block {
    position: relative;
    width: 44px;
    height: 32px;
    margin-inline-end: 16px;
    overflow: hidden;
    cursor: pointer;
    background-color: value('fill-color-humble');
    border-radius: value('radius-small');
    box-shadow: value('shadow-base');

    &:last-child {
      margin-inline-end: 0;
    }

    &::before {
      position: absolute;
      inset-block-start: 0;
      top: 0;
      bottom: 0;
      width: 30%;
      content: '';
      background-color: value('content-color-reverse');
    }

    &::after {
      position: absolute;
      inset-inline: 0;
      top: 0;
      height: 25%;
      content: '';
      background-color: value('content-color-base');
    }

    &--aside {
      &::before {
        z-index: 1;
        background-color: value('content-color-base');
      }

      &::after {
        background-color: value('content-color-reverse');
      }
    }

    .#{$namespace}-icon {
      position: absolute;
      inset-inline-end: 3px;
      bottom: 3px;
      color: value('color-primary-base');
    }
  }

  &__theme-mode {
    border: value('border-base');

    &--dark {
      @include define-preset-values(
        'switch',
        (
          bg-color-open: value('fill-color-background'),
          signal-bg-color: value('color-black'),
          icon-color: value('content-color-secondary')
        )
      );
    }
  }

  &__major-color {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 20px;
    margin-inline-end: 8px;
    margin-bottom: 6px;
    color: value('color-white');
    cursor: pointer;
    border-radius: value('radius-small');

    &:last-child {
      margin-inline-end: 0;
    }
  }

  &__copyright {
    width: 100%;
    padding: 16px 0 22px;
    color: value('content-color-secondary');
    text-align: center;
  }

  &__links {
    width: 100%;
    padding: 24px 56px 0;

    &-row {
      display: flex;
      justify-content: space-between;
      padding: 0 8px;
      border-bottom: value('border-light-2');
    }

    &--vertical &-row {
      flex-direction: column;
      align-items: center;
    }
  }

  &__link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 4px;

    &-name,
    &-subname,
    .#{$namespace}-linker {
      display: inline-flex;
    }

    &-group {
      display: inline-flex;
      flex: 1 0 0;
      flex-direction: column;
      padding-inline-end: 24px;
      padding-bottom: 32px;

      &--vertical {
        align-items: center;
        padding-inline-end: 0;
      }
    }

    &-name--group {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      font-size: value('font-size-primary');
    }

    &-subname {
      margin-inline-start: 6px;
      color: value('content-color-disabled');
    }
  }
}