.colorOption {
  inline-size: 40px;
  block-size: 40px;
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

.colorOption:hover {
  box-shadow: 0 0 0 2px var(--side-nav-hover-color);
}

.initial {
  font-size: 20px;
  line-height: 1em;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

.profileList {
  display: inline;
  position: absolute;
  inset-block-start: 60px;
  inset-inline-end: 10px;
  min-inline-size: 250px;
  block-size: 400px;
  padding: 5px;
  background-color: var(--card-bg-color);
  box-shadow: 0 0 4px var(--scrollbar-color-hover);
}

.profileWrapper {
  margin-block-start: 60px;
  block-size: 340px;
  overflow-y: auto;
}

.profile {
  cursor: pointer;
  block-size: 50px;
  -webkit-transition: background 0.2s ease-out;
  -moz-transition: background 0.2s ease-out;
  -o-transition: background 0.2s ease-out;
  transition: background 0.2s ease-out;
}

.profile:hover {
  background-color: var(--side-nav-hover-color);
  color: var(--side-nav-hover-text-color);
  -moz-transition: background 0.2s ease-in;
  -o-transition: background 0.2s ease-in;
  transition: background 0.2s ease-in;
}

.profile .colorOption {
  float: var(--float-left-ltr-rtl-value);
  position: relative;
  inset-block-end: 5px;
  margin: 10px;
}

.profileName {
  display: flex;
  align-items: center;
  block-size: 50px;
  padding-inline-end: 10px;
}

.profileListTitle {
  position: absolute;
  margin: 0;
  inset-inline-start: 10px;
}

.profileSettings {
  float: var(--float-right-ltr-rtl-value);
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 5px;
}