/* SETTINGS CONTENT */
%standardSidebarView {
  > %settingsContentRegion {
    background: transparent;
  }
}
%settingsContentRegion {
  %settingsContentScroller,
  %settingsContentSidebarScroller {
    background: transparent;
  }
}

// CLOSE BUTTON
%themeDark {
  %settingsCloseButton {
    border-color: hsla(0, 0%, 100%, 0.4);
    color: hsla(0, 0%, 100%, 0.6);
    &:hover {
      border-color: hsla(0, 0%, 100%, 0.6);
      background-color: transparent;
    }
  }
  %settingsCloseButtonKeybind {
    color: hsla(0, 0%, 100%, 0.6);
  }
}

// UNSAVED CHANGES
%settingsNoticeContainer {
  background-color: hsla(0, 0%, 0%, 0.8) !important;
}

// AVATAR UPLOADER
%settingsImageUploaderInner {
  background-color: hsla(0, 0%, 100%, 0.05);
}
%themeDark %settingsImageUploaderIcon {
  background-color: $main-color;
  background-image: none;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-image: url(https://discord.com/assets/d5c25e76af04cea8997e4a060572feae.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    filter: brightness(0) invert(1);
    pointer-events: none;
  }
}

// ITEM CARDS
%settingsCard {
  &:not(%settingsCardOutline),
  &%settingsCardOutline {
    background-color: cv('bg.general.card');
    border-color: hsla(0, 0%, 100%, 0.07);
  }
  %anchor {
    color: var(--url-color);
  }
}

// COLOR PICKER
%themeDark %settingsColorPickerCustom {
  background-color: cv('bg.general.popout');
  border-color: transparent;
  border-radius: 5px;
}

// WARNING SHAKE
%shakeable[style*='transform'] {
  transform: none !important;
  %bg {
    animation: cv-shake 0.5s ease-in;
  }
}

// DROP DOWN
%settingsLookFilled%settingsDropdownSelect {
  background-color: hsla(0, 0%, 100%, 0.07);
  border-color: hsla(0, 0%, 100%, 0.09);
}
%settingsDropdownPopout {
  background-color: cv('bg.general.popout');
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
%settingsDropdownOption {
  &:hover,
  &:focus,
  &%settingsDropdownOptionFocused {
    background-color: hsla(0, 0%, 100%, 0.05);
    border: hsla(0, 0%, 100%, 0.07);
  }
  &[aria-selected='true']:not(%settingsDropdownOption%settingsDropdownMulti) {
    background-color: $main-color;
    %settingsDropdownOptionSelectedIcon {
      circle {
        fill: $main-color;
      }
    }
    path {
      fill: #fff;
    }
  }
}

// ohnyo
%settingsAttendeeCTA:after {
  content: 'ClearVision easter egg, please visit our server for a headpat :)';
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 1rem;
  color: hsla(0, 0%, 100%, 0.7);
  text-align: center;
  top: 130%;
  z-index: -1;
  left: 0;
}
