symbols-dropdown {
  display:flex;
  flex-direction:column;
  width:100%; 
  position:relative; 
  align-items: end;
}

symbols-dropdown * {
  box-sizing: border-box;
}

/* Open / Close Button ------------------------------------------------------ */

symbols-dropdown .dropdown-button {
  display:flex; 
  border:1px solid transparent !important;
  align-items:center;
  position:relative; 
  margin-right:8px; 
}

symbols-dropdown .dropdown-button:after {
  display: block;
  content: '.';
  font-size: 0;
  width: 5px;
  height: 5px;
  border: solid #596673;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: relative;
  z-index: 1;
  margin-left:8px; 
  user-select: none;
  pointer-events: none;
}

symbols-dropdown .buttons-container {
  display:flex; 
  justify-self: flex-start;
  align-items: center;
}

/* Current Icon Sample ------------------------------------------------------ */

symbols-dropdown .current-icon-sample {
  display:flex; 
  place-content: center; 
  place-items: center;
  overflow:hidden;
  display: flex;
  height:34px; 
  padding:0 8px; 
}

symbols-dropdown .current-icon-sample > span {
  display:flex; 
  place-content: center; 
  place-items: center;
  overflow:hidden;
  display: flex;
  height:inherit; 
}

symbols-dropdown .current-icon-sample:empty,
symbols-dropdown .current-icon-sample > span:empty,
symbols-dropdown .current-icon-sample > span:empty ~ button {
  display:none; 
}

symbols-dropdown .current-icon-sample svg {
  width:22px; 
  margin-right:8px; 
  height:22px; 
  overflow:visible;
}



symbols-dropdown .current-icon-sample .delete {
  margin-left:8px;
}

/* Symbols Container -------------------------------------------------------- */

symbols-dropdown .contents-container {
  padding:8px; 
  box-sizing: border-box;
  display:none; 
  position:relative; 
  flex-direction:column;
  margin-top:-1px;
  width:100%; 
  background-color:#F3F7FC;
  border-radius:6px; 
  border:1px solid #DFE5EA;
  z-index:2; 
  border-top-left-radius: 0;
}

/* Theme Toggle Button ------------------------------------------------------ */

symbols-dropdown .lightswitch-field.field {
  margin-bottom:8px; 
  align-self: flex-end;
  position: absolute;
  bottom: 100%;
  right: 43px;
}

symbols-dropdown .lightswitch-field.field .lightswitch-inner-container {
  background-color:white; 
}

/* List of Symbols ---------------------------------------------------------- */

symbols-dropdown ul.list {
  --icon-size : 60px; 
  display:grid;
  grid-gap:8px; 
  grid-auto-rows: var(--icon-size);
  grid-template-columns:repeat(auto-fill, minmax(var(--icon-size), 1fr));
}

symbols-dropdown ul.list li button {
  display:flex;
  place-content: center; 
  place-items: center;
  border-radius: 5px;
  background-color: white;
  width: 100%;
  height: 100%;
  outline: none !important;
  position:relative; 
  padding:8px; 
  transition:background-color 0.2s ease-in-out;
}

symbols-dropdown ul.list li button span {
  position:absolute; 
  top:50%; 
  left:50%;
  padding:4px 8px;
  font-size:12px; 
  background-color:white; 
  border-radius:6px; 
  border:1px solid #DFE5EA;
  white-space:nowrap;
  opacity:0; 
  pointer-events:none; 
  transform:translate(-50%, -10%);  
  transition:transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

symbols-dropdown ul.list li button svg {
  overflow:visible;
  width:100%;
  height:100%; 
}

symbols-dropdown ul.list li button.current { 
  pointer-event:none; 
}

symbols-dropdown ul.list li button:active {
  outline: none !important;
}

symbols-dropdown ul.list li button.current,
symbols-dropdown ul.list li button:hover {
  cursor:pointer;
  z-index:1;
  border:1px solid #E12D39 !important;
}

symbols-dropdown ul.list li button:hover span, symbols-dropdown ul.list li button.none span {
  transform:translate(-50%, -50%);  
  opacity:1; 
}

/* Open State --------------------------------------------------------------- */

symbols-dropdown.open .dropdown-button {
  background:#F3F7FC !important; 
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index:3; 
  border:1px solid #DFE5EA !important;
  border-bottom-color:transparent !important; 
}

symbols-dropdown.open .contents-container {
  display:flex; 
}

/* Size Toggle -------------------------------------------------------------- */

symbols-dropdown .toggle-size {
  background-color: white;
  border: 1px solid #DBE5EF;
  border-radius: inherit;
  display: flex;
  place-content: center;
  place-items: center;
  transition: background-color 0.3s ease-in-out;
  overflow: hidden;
  display: flex;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0px;
  align-items: center;
  height: 36px;
  width: 36px;
}

symbols-dropdown .toggle-size svg {
  width:22px; 
  height:22px; 
  overflow:visible;
}

symbols-dropdown .toggle-size svg .small { display:none; }

symbols-dropdown.large-icons .toggle-size .large { display:none; }
symbols-dropdown.large-icons .toggle-size .small { display:block; }
symbols-dropdown.large-icons ul.list {
  --icon-size:120px; 
}

div[data-type*="SymbolsField"] .field { margin-bottom:0 !important; }
div[data-type*="SymbolsField"] > .input .select { display:none !important; }

/* Theme -------------------------------------------------------------------- */

symbols-dropdown.dark-mode ul.list li button { 
  background-color:#242424;
}