@use '@angular/material' as mat;
@use 'mixins/amixin' as *;
@mixin activeStyle() {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  border-radius: 0 4px 4px 0;
}

.builder-sidebar {
  display: flex;
  flex-direction: column;
  width: 60px;
  height: 100%;
  background-color: var(--mat-sys-background);
  .mat-divider {
    width: 100%;
  }
  .menu,
  .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .logo {
    display: flex;
    padding: 10px;
    justify-content: center;
    height: 55px;
    flex: 0 0 55px;
    box-sizing: border-box;
    ::ng-deep {
      img {
        max-height: 30px;
        object-fit: contain;
      }
    }
  }
  .accordion-menu,
  .icon-menu {
    justify-content: start;
    flex: 1 1 auto;
    margin: 10px 0;
    overflow: auto;
    @include scrollbar(var(--mat-sys-outline));
  }
  .icon-menu {
    .item {
      position: relative;
      padding: 16px 0;
      width: 100%;
      height: 56px;
      box-sizing: border-box;
      text-align: center;
      .custom-icon {
        position: relative;
        z-index: 1;
      }
      &.active,
      &:hover,
      &:focus {
        .custom-icon {
          &::after {
            content: '';
            position: absolute;
            z-index: -1;
            left: 50%;
            top: 50%;
            width: 40px;
            height: 40px;
            transform: translate(-50%, -50%);
            border-radius: 10px;
          }
        }
      }
      &:hover {
        cursor: pointer;
        > .child {
          display: flex;
        }
      }
      .child {
        display: none;
        text-align: left;
        position: fixed;
        margin-left: 60px;
        width: 246px;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 999;
        flex-direction: column;
        line-height: 1.5;
        cursor: default;
        .hover-menu {
          position: relative;
          display: block;
          height: 100%;
          overflow: auto;
          .title {
            overflow: hidden;
            line-height: 56px;
            height: 56px;
            border-radius: 0;
            font-weight: 500;
            font-size: 24px;
            padding: 0 30px;
          }
          .child-menu {
            display: flex;
            flex-direction: column;

            ::ng-deep {
              .mdc-list-item {
                position: relative;
                cursor: pointer;
                padding-left: 30px;
                padding-right: 30px;
                height: 56px;

                .mat-icon {
                  height: inherit;
                  width: inherit;
                }
                .mdc-list-item__primary-text {
                  display: flex;
                  align-items: center;
                  gap: 6px;
                }
                &.active,
                &:hover {
                  &::after {
                    content: '';
                    position: absolute;
                    height: 96%;
                    width: calc(100% - 20px);
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 0;
                    border-radius: 6px;
                  }
                }

                &:not(.mdc-list-item--selected):focus {
                  &::before {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .accordion-menu {
    flex: 0 1 100%;
    ::ng-deep {
      mat-panel-title {
        font-size: 17px;
        align-items: center;
      }
      > .mat-accordion {
        > .mat-mdc-list {
          &.no-child {
            .mdc-list-item__content {
              margin-left: 0;
              padding: 0;
              font-weight: 500;
              .mdc-list-item__primary-text {
                font-weight: 500;
              }
            }
            &.active {
              &::after {
                @include activeStyle();
              }
            }
          }
          .mat-mdc-list-item {
            &::after {
              display: none;
            }
          }
        }
      }
      .mat-accordion {
        .mat-expansion-panel {
          border-radius: 0;
          .mat-expansion-panel-header {
            border-bottom: 0;
            height: 56px;
            .mat-content {
              font-size: 17px;
              align-items: center;
            }
          }
          &.active {
            .mat-expansion-panel-header {
              &::after {
                @include activeStyle();
              }
            }
          }
        }
      }
      .mat-icon {
        line-height: 1;
      }

      .mat-mdc-list {
        position: relative;
        border-bottom: none !important;
        padding: 0;
        overflow: hidden;
        .mat-mdc-list-item {
          overflow: visible;
          height: 56px;
          &:hover {
            &::after {
              content: '';
              position: absolute;
              height: 96%;
              width: 100%;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              z-index: 0;
              border-radius: 6px;
            }
          }
          &.mdc-list-item--with-leading-icon {
            padding-left: 16px;
            .mat-mdc-list-item-icon {
              margin-left: 0;
            }
            .mdc-list-item__content {
              margin-left: 0;
            }
          }
        }
        .mdc-list-item__content {
          position: relative;
          z-index: 10;
          padding-top: 4px;
          padding-bottom: 4px;
          margin-left: 18px;
        }
      }
    }
  }

  .bottom {
    @include mat.badge-overrides(
      (
        background-color: var(--mat-sys-primary),
        text-color: var(--mat-sys-on-primary),
      )
    );
    .icon-actions {
      ::ng-deep {
        .mdc-icon-button {
          color: var(--mat-sys-on-surface);
        }
      }
    }
    .toggle {
      cursor: pointer;
      display: flex;
      .wrapper {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--mat-sys-on-surface);
        ::ng-deep {
          .custom-icon {
            align-items: center;
          }
          .mat-icon {
            border-radius: 50%;
            width: 30px !important;
            height: 30px !important;
            display: inherit;
            transition: all 0.1s ease;
            box-shadow: var(--mat-sys-level0);
          }
          .text {
            margin-left: 10px;
            font-size: small;
          }
          &:hover {
            .mat-icon {
              background-color: var(--mat-sys-on-surface);
              color: var(--mat-sys-inverse-primary);
            }
          }
        }
      }
    }
  }
  &.closed {
    background-color: #272727;
    color: #f5f5f5;
    box-shadow: var(--mat-sys-level0);
    a.logo {
      background-color: #373737;
      transition: background-color 0.2s ease-in-out;
      &:hover {
        background-color: #272727;
      }
    }
    .mat-divider {
      border-top-color: rgba(255, 255, 255, 0.2);
    }
    .icon-menu {
      .item {
        &:hover,
        &:focus {
          > .custom-icon {
            color: #fff;
            &::after {
              background-color: rgba(#fff, 0.1);
            }
          }
        }

        &.active {
          > .custom-icon {
            color: var(--mat-sys-on-primary);
            &::after {
              background-color: var(--mat-sys-primary);
            }
          }
        }
      }
      .child {
        background-color: var(--mat-sys-surface);
        color: var(--mat-sys-on-surface);
        .hover-menu {
          background-color: var(--mat-sys-surface);
          box-shadow:
            0 0 72px rgba(0, 0, 0, 0.2),
            0 0 8px rgba(0, 0, 0, 0.04),
            0 0 40px rgba(0, 0, 0, 0.06);
          @include scrollbar(var(--mat-sys-outline));
          .child-menu {
            .mdc-list-item {
              &.active,
              &:hover {
                ::ng-deep {
                  .mdc-list-item__content {
                    z-index: 1;
                    .mdc-list-item__primary-text {
                      color: var(--mat-sys-primary);
                    }
                  }
                }
                &:after {
                  background-color: var(--mat-sys-secondary-fixed);
                }
              }
              ::ng-deep {
                .mdc-list-item__primary-text {
                  color: var(--mat-sys-on-surface);
                }
              }
              &:hover {
                &:after {
                  background-color: var(--mat-sys-secondary-fixed);
                }
              }
            }
          }
        }
      }
    }
    .bottom {
      .icon-actions {
        ::ng-deep {
          .mdc-icon-button {
            color: #fff;
          }
        }
      }
      .toggle {
        .wrapper {
          color: #fff;
        }
      }
    }
  }
  &.opened {
    width: 200px;
    .accordion-menu {
      ::ng-deep {
        app-icon {
          color: var(--mat-sys-on-surface);
        }
        > .mat-accordion {
          > .mat-mdc-list {
            &.no-child {
              a {
                color: var(--mat-sys-on-surface);
              }
              &.active {
                a,
                .mat-icon {
                  color: var(--mat-sys-primary);
                }
                &::after {
                  background-color: var(--mat-sys-primary);
                }
              }
            }
          }
        }
        .mat-accordion {
          > .mat-mdc-list {
            &.active {
              &::before {
                background-color: var(--mat-sys-primary);
              }
            }
          }
          .mat-expansion-panel {
            background-color: var(--mat-sys-background);
            .mat-expansion-panel-header {
              a {
                color: var(--mat-sys-on-surface);
              }
              .mat-expansion-panel-header-title {
                color: var(--mat-sys-on-surface);
              }
              .mat-expansion-indicator {
                &::after {
                  color: var(--mat-sys-on-surface);
                }
              }
            }
            &.active {
              .mat-expansion-panel-header {
                background-color: var(--mat-sys-surface-dim);
                &::after {
                  background-color: var(--mat-sys-primary);
                }
              }
            }
          }
        }
        .mat-mdc-list {
          .mat-mdc-list-item {
            color: var(--mat-sys-on-surface);
            a {
              color: var(--mat-sys-on-surface);
              &.active {
                color: var(--mat-sys-primary);
              }
            }
            &:hover {
              a,
              .mat-mdc-list-item-icon {
                z-index: 1;
                color: var(--mat-sys-primary);
              }
              &:after {
                background-color: var(--mat-sys-secondary-fixed);
              }
            }
          }
          &.active {
            .mat-mdc-list-item {
              .mat-mdc-list-item-icon {
                color: var(--mat-sys-primary);
              }
            }
          }
        }
      }
    }
  }

  .icon-actions {
    ::ng-deep {
      .mat-badge-above {
        .mat-badge-content {
          bottom: 120%;
        }
      }
    }
  }
}
