:host {
  width: 100%;
  overflow: hidden;
}

#main-switcher{
  display: inherit;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
}

.main-container {
  min-height: 1px;
  height: 100%;
  display: flex;
  .sidebar {
    padding-inline: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: var(--color-primary-700);
    width: 40px;
    height: 100%;
    color: white;
    .quick-actions-content {
      padding-top: 24px;
      padding-bottom: 22px;
      border-radius: 8px;
      .create-button-icon-badge{
        position: relative;
        dss-notification-badge {
          position: absolute;
          top: -7px;
          right: -6px;
          z-index: 1;
        }
        dss-icon {
          position: relative;
        }
      }
    }
    .icon {
      margin-left: 8px;
    }

    #menu-region{
      width: 100%;
      height: 100%;
      min-height: 1px;
    }

    #menu-region-container {
      padding-top: 15px;
      min-height: 1px;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
      overflow-y: auto;
      margin-right: -14px; 
      padding-right: 14px; 
      scrollbar-color: var(--color-primary-200) var(--color-primary-700);
      scrollbar-width: thin;
    }

      #menu-region-container::-webkit-scrollbar {
        width: 6px; 
      }
      #menu-region-container::-webkit-scrollbar-track {
        background: var(--color-primary-700);
      }
      #menu-region-container::-webkit-scrollbar-thumb {
        background-color: var(--color-primary-400);
        border-radius: 4px;
      }
    

    .bottom-content {
      display: flex;
      flex-direction: column;
      gap: 24px;
      width: 100%;
      .bottom-content-first {
        display: flex;
        flex-direction: column;
        gap: 22px;
      }
    }
    &[expanded] {
      width: 252px;
      align-items: flex-start;
    }
    .create-button-closed {
      cursor: pointer;
      background-color: #f0f0f0;
      color: var(--color-primary-700);
      border-radius: 8px;
      width: 40px;
      height: 40px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s ease;
      &:hover {
        background-color: var(--color-primary-900);
        color: white;
      }
    }
    .create-button-opened {
      cursor: pointer;
      background-color: #f0f0f0;
      color: var(--color-primary-700);
      border-radius: 8px;
      gap: 8px;
      font-weight: 600;
      width: 220px;
      height: 40px;
      display: flex;
      flex-direction: row;
      align-items: center;
      transition: background-color 0.3s ease;
      &:hover {
        background-color: var(--color-primary-900);
        color: white;
      }
    }
  }
  .content {
    display: flex;
    height: 100%;
    width: 100%;
    min-width: 0;
  }
  #main-region-container {
    min-height: 1px;
    min-width: 0;
    height: 100%;
    flex: 1;
  }
  #navigation-menu-lower-region-container{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
}
.footer {
  display: flex;
  height: 48px;
  padding: 12px 24px;
  .footer-logo {
    align-self: center;
    display: flex;
    gap: 16px;
  }
}
.divider-opened {
  width: 220px;
}
.divider-closed {
  width: 40px;
}
.toggle-button {
  margin-bottom: 24px;
}
@media (max-width: 1439px) {
  .bottom-content-first {
    margin-bottom: 24px;
  }
  .toggle-button {
    display: none;
  }
  .content {
    overflow-y: auto;
  }
}