.main-layout.settings-layout
  display flex
  flex-direction row
  height calc(100vh - 70px)
  padding 0 10px 10px 0;

.main-layout.settings-layout.isInIframe
  height 100vh

.settings-sidebar
  width 350px
  height 100%
  overflow-y auto
  overflow-x hidden
  scrollbar-width thin
  scrollbar-color transparent transparent

.settings-sidebar::-webkit-scrollbar
  width 8px

.settings-sidebar::-webkit-scrollbar-track
  background transparent

.settings-sidebar::-webkit-scrollbar-thumb
  background-color rgba(0, 0, 0, 0.3)
  border-radius 4px
  opacity 0
  transition opacity 0.3s ease

.settings-sidebar:hover::-webkit-scrollbar-thumb
  background-color rgba(0, 0, 0, 0.5)
  opacity 1

.settings-sidebar:hover
  scrollbar-color rgba(0, 0, 0, 0.5) transparent

.settings-nav-item
  position relative
  padding 12px 24px
  transition background-color 0.2s ease
  cursor pointer

  &::before
    content ""
    position absolute
    left 0
    top 0
    width 0
    height 100%
    background-color #F67E35
    transition width 0.2s ease

  &:hover
    background-color #f9fafb

    &::before
      width 4px

    .MuiListItemIcon-root
      color #F67E35

  &.active

    &::before
      width 4px

    .MuiListItemIcon-root
      color #F67E35

.settings-content
  flex-grow 1
  display flex
  flex-direction column
  height 100%
  overflow-y auto
  border-radius 16px
  background #fff

.settings-content-header
  display flex
  align-items center
  padding 16px 24px
  gap 16px

.back-button
  .MuiSvgIcon-root
    font-size 28px

.settings-content-body
  padding 24px
  flex-grow 1

.settings-tab-content
  text-align left

.settings-content-tabs
  .MuiTab-root
    color #424244E5
    text-transform none
    font-weight 600
    font-size 24px

  .MuiTab-root.Mui-selected
    color #424244E5

  .MuiTabs-indicator
    background-color #F67E35

