/* --------------

/* section */
section {
  /*width: 50%;*/
  /*width: 250px;*/
  min-height: inherit;

  padding: 0 30px 20px 30px;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  position: relative;
}

/*
section::before,
section::after {
  content: "";
  display: block;

  border-radius: 100%;

  position: absolute;
}

section::before {
  width: 30px;
  height: 30px;

  background: var(--primary);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);

  top: 18px;
  left: 18px;
}

section::after {
  width: 42px;
  height: 42px;

  border: 1px solid var(--primary);

  top: 11px;
  left: 11px;
}
*/



.light {
  --primary: hsl(250, 100%, 44%);
  --other: hsl(0, 0%, 14%);

  background: hsl(0, 0%, 98%);
}

.dark {
  /*--primary: hsl(1, 100%, 68%);*/
  --primary:#2CBECD;
  --other: hsl(0, 0%, 90%);

  /*background: hsl(0, 0%, 10%);*/
}

:root, 
[data-theme="dark"] {
    --primary-color: #2CBECD;
    --secondary-color: hsl(0, 0%, 90%);
    --bg-color: #292C34;

    --merck_purple: #503291;
    --merck_pink: #EB3C96;
    --merck_blue: #0F69AF;
    --merck_cyan: #2DBECD;
    --merck_limegreen: #A5CD50;
    --merck_red: #E61E50;
    --merck_yellow: #FFC832;
    --merck_green: #149B5F;

}

[data-theme="light"] {
    --primary-color: #0F69AF;
    --secondary-color: hsl(0, 0%, 30%);
    --bg-color: #FFFFFF;
}


svg#dark-mode-switch,
svg#light-mode-switch {
  /* fill: var(--other); */
  fill: var(--secondary-color);
  cursor: pointer;
}

svg#dark-mode-switch:hover,
svg#light-mode-switch:hover {
  /*fill: var(--primary);*/
  fill: var(--primary-color);
}

/*
[data-theme="light"] > svg#dark-mode-switch {
  display: none;
}


[data-theme="dark"] > svg#light-mode-switch {
  display: none;
}
*/

svg#dark-mode-switch {
  display: none;
}

.optional-visibility {
  display: none;
}

#color-mode-switch {
  margin-left: auto;
  padding: 0;
}

/* h1 */
h1 {
  /*color: var(--other);*/
  color: var(--secondary-color);
  padding: 8px 4px;
  /* border-bottom: 2px solid var(--other); */
  border-bottom: 2px solid var(--secondary-color)
}


/* label */
label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;

  margin: 12px 0;

  cursor: pointer;
  position: relative;
}


/* input */
input {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}


/* .design */

.design {
  width: 16px;
  height: 16px;

  /*border: 1px solid var(--other);*/
  border: 1px solid var(--secondary-color);
  border-radius: 100%;
  margin-right: 16px;

  position: relative;
}

.design::before,
.design::after {
  content: "";
  display: block;

  width: inherit;
  height: inherit;

  border-radius: inherit;

  position: absolute;
  transform: scale(0);
  transform-origin: center center;
}

.design:before {
  /*background: var(--other); */
  background: var(--secondary-color);
  opacity: 0;
  transition: .3s;
}

.design::after {
  /*background: var(--primary);*/
  background: var(--primary-color);
  opacity: .4;
  transition: .6s;
}


/* .text */
.text {
  /* color: var(--other); */
  color: var(--secondary-color);
  font-weight: bold;
}


/* checked state */
input:checked+.design::before {
  opacity: 1;
  transform: scale(.6);
}


/* other states */
input:hover+.design,
input:focus+.design {
  /* border: 1px solid var(--primary); */
  border: 1px solid var(--primary-color);
}

input:hover+.design:before,
input:focus+.design:before {
  /* background: var(--primary); */
  background: var(--primary-color);
}

input:hover~.text {
  /* color: var(--primary); */
  color: var(--primary-color);
}

input:focus+.design::after,
input:active+.design::after {
  opacity: .1;
  transform: scale(2.6);
}

/* --------------- */


.container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px;
}