@use 'backend' as *;

// FIXES BG
#{c(main options fullMotion)} #{c(modals translate)} {
  transform: unset !important;
}

// NO NITRO PROFILE
#{c(profile userPopout)} {
  &:not(#{c(profile customTheme)}) {
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: cv('bg.popout.img') cv('bg.popout.pos')/cv('bg.popout.size') no-repeat;
      background-attachment: cv('bg.popout.attach');
      filter: cv('bg.popout.filter');
      z-index: -1;
    }
  }
}
#{c(profile userModal)} {
  &:not(#{c(profile customTheme)}) {
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: cv('bg.modal.img') cv('bg.modal.pos')/cv('bg.modal.size') no-repeat;
      background-attachment: cv('bg.modal.attach');
      filter: cv('bg.modal.filter');
      z-index: -1;
    }
  }
}

#{c(profile outer)} {
  border: none;
  &:not(#{c(profile customTheme)}) {    
    background: cv('shading.bg');
    #{c(profile inner)} {
      background: transparent;
    }
  }
}
#{c(profile overlay)} {
  background-color: cv('shading.card');
}

// STATUS
#{c(profile outer)}:not(#{c(profile customTheme)}) {
  #{c(profile status outer)} {
    background: cv('shading.popout');
  }
  #{c(profile status inner)} {
    background: transparent;
  }
}
#{c(profile status outer)} {
  &::before,
  &::after {
    display: none;
  }
}
#{c(profile status tooltip)} {
  background: cv('shading.popout');
  box-shadow: none;
}
#{c(profile status caretIcon)} #{c(profile status caretFill)} {
  fill: cv('shading.popout');
}

// POPOUT SEND MESSAGE
#{c(profile customTheme)} {
  #{c(chatForm channelTextAreaInline)} {
    background: var(--user-profile-note-background-focus);;
    box-shadow: 0 0 0 2px var(--user-profile-border);
    &:focus-within {
      box-shadow: 0 0 2px 2px var(--profile-gradient-primary-color);
    }
  }
}

// PROFILE STYLES
#{c(profile modal profile)} {
  background: cv('shading.bg');
  outline: none;
  margin-bottom: 24px;
  border-radius: 8px;
}
#{c(profile modal profileNote)} {
  #{c(profile modal noteTextarea)} {
    margin-top: 2px;
    border-color: cv('shading.input.border');
    background: cv('shading.input.bg');
    &:focus:focus,
    &:focus:hover {
      background: cv('shading.input.bg');
      border-color: cv('color.main');
    }
  }
}

// NITRO PROFILE MODAL
#{c(profile customTheme)} {
  // TABS
  #{c(tab top)} {
    #{c(tab item)} {
      --selected-tab-item-color: var(--profile-gradient-secondary-color);
      &#{c(tab selected)} {
        --selected-tab-item-color: var(--profile-gradient-primary-color);
      }
    }
  }
  // SCROLLBAR
  ::-webkit-scrollbar-thumb {
    background-color: var(--profile-gradient-primary-color);
  }
  // NOTE
  #{c(profile modal noteTextarea)} {
    background: var(--user-profile-note-background-focus);
    &:focus {
      border-color: var(--profile-gradient-primary-color);
      background: var(--user-profile-note-background-focus);
    }
  }
  // BUTTONS
  &:is(#{c(main themeLight)}, #{c(main themeDark)}) {
    #{c(profile button themeColor)} {
      &#{c(profile button secondary)} {
        background: var(--profile-gradient-button-color);
        color: var(--button-filled-brand-text);
      }
    }
  }
}

// DM SIDE PROFILE
#{c(profile userSidebar)} {
  &:not(#{c(profile customTheme)}) {
    background: hsl(from cv('shading.bg') h s l/calc(cv('shading.percent') * 0.3));
  }
}
