@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/*#region animations */
@keyframes slide-in-top {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slide-out-top {
  to { transform: translateY(-100%); opacity: 0; }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slide-out-right {
  to { transform: translateX(100%); opacity: 0; }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slide-out-left {
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide-in-bottom {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slide-out-bottom {
  to { transform: translateY(100%); opacity: 0; }
}
/*#endregion animations */

/*#region variables */
#app {
  --nav-transition-duration: 0.3s;
}

[data-orientation="vertical"] {
  --primary-header: 700 5vw Arial;
  --secondary-header: 700 2vh Arial;
  --tertiary-header: 600 1.5vh Arial;
  
  --primary-text: 500 1.7vh Arial;
  --secondary-text: 500 1.2vh Arial;
}

[data-orientation="horizontal"] {
  --primary-header: 700 5vh Arial;
  --secondary-header: 700 2vw Arial;
  --tertiary-header: 700 1.5vw Arial;
  
  --primary-text: 500 1.6vw Arial;
  --secondary-text: 500 1.2vw Arial;
}

/*#region color-variables */
[data-theme="light"] {
  --absolute-bg: #ffffff;
  --primary-bg: #ffffff;
  --secondary-bg: #ebebeb;
  --primary-text-color: #000000;
  --border-color: #00000080;
  --accent: #969696;
}

[data-theme="dark"] {
  --absolute-bg: #000000;
  --primary-bg: #000000;
  --secondary-bg: #1e1e1e;
  --primary-text-color: #ffffff;
  --border-color: #ffffff99;
  --accent: #969696;
}

[data-theme="light"][data-palette="lime"] {
  --primary-bg: #f5ffe6;
  --secondary-bg: #e6fab4;
  --primary-text-color: #1e2814;
  --border-color: #78963c;
  --accent: #96c846;
}

[data-theme="dark"][data-palette="lime"] {
  --primary-bg: #12180e;
  --secondary-bg: #1c2416;
  --primary-text-color: #dcebd2;
  --border-color: #96c846;
  --accent: #aadc5a;
}

[data-theme="light"][data-palette="pink"] {
  --primary-bg: #fff5fa;
  --secondary-bg: #f5e1f0;
  --primary-text-color: #281423;
  --border-color: #b478a0;
  --accent: #c882b4;
}

[data-theme="dark"][data-palette="pink"] {
  --primary-bg: #161014;
  --secondary-bg: #22181e;
  --primary-text-color: #ebd7e1;
  --border-color: #c882b4;
  --accent: #dc96c8;
}

[data-theme="light"][data-palette="blue"] {
  --primary-bg: #f0f8ff;
  --secondary-bg: #e1f0fa;
  --primary-text-color: #141e28;
  --border-color: #648cb4;
  --accent: #6eaadc;
}

[data-theme="dark"][data-palette="blue"] {
  --primary-bg: #0e1218;
  --secondary-bg: #181e26;
  --primary-text-color: #d7e1eb;
  --border-color: #82b4e6;
  --accent: #8cc8fa;
}

[data-theme="light"][data-palette="purple"] {
  --primary-bg: #f8f5ff;
  --secondary-bg: #e8e1fa;
  --primary-text-color: #231e2d;
  --border-color: #826eaa;
  --accent: #9682c8;
}

[data-theme="dark"][data-palette="purple"] {
  --primary-bg: #100e16;
  --secondary-bg: #1a1824;
  --primary-text-color: #e1dceb;
  --border-color: #a08cd2;
  --accent: #b4a0e6;
}
/*#endregion color-variables */

/*#endregion variables */

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  background: var(--primary-bg);
}

* {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  color: var(--primary-text-color);
  transition: background 0.5s ease, color 0.5s ease;
}
*::-webkit-scrollbar {
  display: none;
}

#app-wrapper {
  height: 100dvh;
  width: 100dvw;
  position: relative;
  box-sizing: border-box;
  padding: env(safe-area-inset-top) 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/*#region top-bar */
.top-bar {
  flex-shrink: 0;
  height: fit-content;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 0;
  border: none;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: space-between;
  background: var(--secondary-bg);
}

.top-bar-content {
  flex-grow: 1;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-orientation="vertical"]s .top-bar-content {
  flex-direction: column;
}

#app-header {
  font: var(--primary-header);
}

.color-relevance-outer-div {
  flex-shrink: 0;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
  box-sizing: border-box;
  padding: 3px 0;
  gap: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.color-relevance-outer-div::-webkit-scrollbar {
  display: none;
}

.color-relevance-div {
  flex-shrink: 0;
  display: none;
  justify-content: center;
  align-items: center;
}

.color-relevance-div div {
  cursor: pointer;
  height: 25px;
  border-width: 1px;
  border-style: solid;
  border-radius: 12.5px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.color-relevance-div p {
  font: var(--secondary-text);
  margin: 0;
}

/*#endregion top-bar */

/*#region inner-app */
#inner-app {
  flex-grow: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: transparent;
}

#inner-app::-webkit-scrollbar {
  display: none;
}

/*#region periodic-table */
#periodic-table {
  --element-gap: 1px;
}

#periodic-table {
  flex-shrink: 0;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
  box-sizing: border-box;
  margin: 0;
  padding: 5px;
  gap: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--absolute-bg);
}

#periodic-table::-webkit-scrollbar {
  display: none;
}

#main-table {
  gap: var(--element-gap);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  background: transparent;
}

#f-block-table {
  gap: var(--element-gap);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  background: transparent;
}

.group {
  gap: var(--element-gap);
  display: flex;
  flex-direction: column;
  background: transparent;
}

.period {
  gap: var(--element-gap);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: transparent;
}

/*#region element styles */

/*#region size variables */
#periodic-table {
  --element-size-scale: 1;
  --element-atomic-number-scale: 1;
  --element-symbol-scale: 1;
  --element-name-scale: 1;

  --element-size: calc(50px * var(--element-size-scale));

  --element-atomic-number-weight: 700;
  --element-atomic-number-size: calc(10px * var(--element-atomic-number-scale));
  --element-atomic-number-line-height: 1;
  --element-atomic-number-font-family: "Oswald";

  --element-symbol-weight: 500;
  --element-symbol-size: calc(22px * var(--element-symbol-scale));
  --element-symbol-line-height: 1.15;
  --element-symbol-font-family: Arial;

  --element-name-weight: 500;
  --element-name-size: calc(10px * var(--element-name-scale));
  --element-name-line-height: 1;
  --element-name-font-family: "Oswald";
}
/*#endregion size variables */

/*#region color variables */
:root {
  --solid-bg: #0060f025;
  --solid-color: #0060f0;

  --liquid-bg: #002c0025;
  --liquid-color: #002c00;

  --gas-bg: #d6002425;
  --gas-color: #d60024;


  --s-block-bg: #002c0025;
  --s-block-color: #002c00;

  --p-block-bg: #cd1d5e25;
  --p-block-color: #cd1d5e;

  --d-block-bg: #6232EC25;
  --d-block-color: #6232EC;

  --f-block-bg: #94570025;
  --f-block-color: #945700;


  --alkali-metal-bg: #00758c25;
  --alkali-metal-color: #00758c;

  --alkaline-earth-metal-bg: #d6002425;
  --alkaline-earth-metal-color: #d60024;

  --transition-metal-bg: #6232EC25;
  --transition-metal-color: #6232EC;

  --post-transition-metal-bg: #002c0025;
  --post-transition-metal-color: #002c00;

  --metalloid-bg: #94570025;
  --metalloid-color: #945700;

  --reactive-nonmetal-bg: #0060f025;
  --reactive-nonmetal-color: #0060f0;
  
  --halogen-bg: #3f374f25;
  --halogen-color: #3f374f;

  --noble-gas-bg: #cd1d5e25;
  --noble-gas-color: #cd1d5e;

  --lanthanide-bg: #00335525;
  --lanthanide-color: #003355;

  --actinide-bg: #c7320025;
  --actinide-color: #c73200;
}
/*#endregion color variables */

/*#region element color-styles */

/*#region by category */
.by-category .category-alkali-metal {
  border-color: var(--alkali-metal-color);
  background-color: var(--alkali-metal-bg);
}

.by-category .category-alkali-metal p {
  color: var(--alkali-metal-color);
}

.by-category .category-alkaline-earth-metal {
  border-color: var(--alkaline-earth-metal-color);
  background-color: var(--alkaline-earth-metal-bg);
}

.by-category .category-alkaline-earth-metal p {
  color: var(--alkaline-earth-metal-color);
}

.by-category .category-transition-metal {
  border-color: var(--transition-metal-color);
  background-color: var(--transition-metal-bg);
}

.by-category .category-transition-metal p {
  color: var(--transition-metal-color);
}

.by-category .category-post-transition-metal {
  border-color: var(--post-transition-metal-color);
  background-color: var(--post-transition-metal-bg);
}

.by-category .category-post-transition-metal p {
  color: var(--post-transition-metal-color);
}

.by-category .category-metalloid {
  border-color: var(--metalloid-color);
  background-color: var(--metalloid-bg);
}

.by-category .category-metalloid p {
  color: var(--metalloid-color);
}

.by-category .category-reactive-nonmetal {
  border-color: var(--reactive-nonmetal-color);
  background-color: var(--reactive-nonmetal-bg);
}

.by-category .category-reactive-nonmetal p {
  color: var(--reactive-nonmetal-color);
}

.by-category .category-halogen {
  border-color: var(--halogen-color);
  background-color: var(--halogen-bg);
}

.by-category .category-halogen p {
  color: var(--halogen-color);
}

.by-category .category-noble-gas {
  border-color: var(--noble-gas-color);
  background-color: var(--noble-gas-bg);
}

.by-category .category-noble-gas p {
  color: var(--noble-gas-color);
}

.by-category .category-lanthanide {
  border-color: var(--lanthanide-color);
  background-color: var(--lanthanide-bg);
}

.by-category .category-lanthanide p {
  color: var(--lanthanide-color);
}

.by-category .category-actinide {
  border-color: var(--actinide-color);
  background-color: var(--actinide-bg);
}

.by-category .category-actinide p {
  color: var(--actinide-color);
}

/*#endregion by category */

/*#region by block*/
.by-block .block-s {
  border-color: var(--s-block-color);
  background-color: var(--s-block-bg);
}

.by-block .block-s p {
  color: var(--s-block-color);
}

.by-block .block-p {
  border-color: var(--p-block-color);
  background-color: var(--p-block-bg);
}

.by-block .block-p p {
  color: var(--p-block-color);
}

.by-block .block-d {
  border-color: var(--d-block-color);
  background-color: var(--d-block-bg);
}

.by-block .block-d p {
  color: var(--d-block-color);
}

.by-block .block-f {
  border-color: var(--f-block-color);
  background-color: var(--f-block-bg);
}

.by-block .block-f p {
  color: var(--f-block-color);
}

/*#endregion by block*/

/*#region by state*/
.by-state .state-solid {
  border-color: var(--solid-color);
  background: var(--solid-bg);
}

.by-state .state-solid p {
  color: var(--solid-color);
}

.by-state .state-liquid {
  border-color: var(--liquid-color);
  background: var(--liquid-bg);
}

.by-state .state-liquid p {
  color: var(--liquid-color);
}

.by-state .state-gas {
  border-color: var(--gas-color);
  background: var(--gas-bg);
}

.by-state .state-gas p {
  color: var(--gas-color);
}

/*#endregion by state*/

/*#endregion element color-styles */

.element-button {
  cursor: pointer;
  height: var(--element-size);
  width: var(--element-size);
  border-width: 0px;
  border-style: solid;
  overflow: hidden;
  border-radius: calc(var(--element-size)/10);
  background: transparent;
}

.element-button p {
  margin: 0;
  line-height: 1;
}

.element-button:hover {
  border-width: 1px;
}

.element-info-div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.atomic-number {
  width: 100%;
  text-align: left;
  font: var(--element-atomic-number-weight) var(--element-atomic-number-size)/var(--element-atomic-number-line-height) var(--element-atomic-number-font-family);
}

.element-name-div {
  flex-shrink: 0;
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.element-symbol {
  font: var(--element-symbol-weight) var(--element-symbol-size)/var(--element-symbol-line-height) var(--element-symbol-font-family);
}

.element-name {
  font: var(--element-name-weight) var(--element-name-size)/var(--element-name-line-height) var(--element-name-font-family);
}
/*#endregion element styles */

/*#endregion periodic-table */

/*#region info-panel */
#info-panel {
  width: 100%;
  box-sizing: border-box;
  margin: auto 0 0 0;
  padding: 20px 10px 100px;
  gap: 50px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: var(--secondary-bg);
}

#info-panel-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;
}

#atomic-number {
  font: var(--secondary-header);
  margin: 0;
}

#element-name {
  font: var(--primary-header);
  margin: 0;
}

#electronic-configuration {
  font: var(--secondary-header);
  margin: 0;
  opacity: 0.6;
}

#info-panel-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;
}

.info-body-text {
  font: var(--primary-text);
  margin: 0;
}

.info-body-values {
  font: var(--primary-text);
  margin: 0;
  opacity: 0.7;
}

#learn-more-link {
  cursor: pointer;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 20px;
  color: var(--primary-text-color);
  background: transparent;
  border: 1px solid var(--primary-text-color);
  font: var(--secondary-text);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

#learn-more-link:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/*#endregion info-panel */

/*#region control-panel */
.added-panel {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: fit-content;
  width: fit-content;
  box-sizing: border-box;
  margin: auto;
  padding: 10px;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-bg);
}

.added-panel.bottom {
  margin-bottom: 10px;
}

.resize-handle {
  user-select: none;
  touch-action: none;
  cursor: grab;
  flex-shrink: 0;
  border-radius: 2.5px;
  background: var(--accent);
  opacity: 0.5;
}
[data-orientation="vertical"] .resize-handle {
  height: 5px;
  width: 50px;
  margin: 10px auto;
}
[data-orientation="horizontal"] .resize-handle {
  height: 50px;
  width: 5px;
  margin: auto 10px;
}
.resize-handle:active {
  cursor: grabbing;
}

/*#endregion inner-app */