:root {
  /* === border === */
  --BORDER-NONE: none;
  /* === background === */
  --BACKGROUND: none;
  /* === primary color===  */
  --PRIMARY-COLOR: white;
  /*===  fonts === */
  --FONT-SIZE: 1.2rem;
}

.keyboard-section {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center;
  width: 100%;
  transition:
    opacity 0.7s ease-in-out,
    transform 0.7s ease-in-out;
}

.keyboard-widget {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.keyboard-section--active {
  pointer-events: auto;
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center;
  width: 100%;
  background-color: rgba(128, 128, 128, 0.721);
  box-shadow: 20px 10px 3000px 20px rgba(0, 0, 0, 0.14);
  z-index: 1;
}

.keyboard__row-0,
.keyboard__row-1,
.keyboard__row-2,
.keyboard__row-3,
.keyboard__row-4 {
  display: flex;
}

.keyboard__key,
.keyboard__backspace-key,
.keyboaord__submit-button,
.keyboard__shift-key,
.keyboard__symbol-switcher,
.keyboard__submit-button,
.keyboard__spacebar,
.keyboard__english-layout,
.keyboard__persian-layout,
.keyboard__reverse-switcher,
.keyboard__backspace-key {
  border: var(--BORDER-NONE);
  background: var(--BACKGROUND);
  flex-grow: 1;
  background-color: var(--PRIMARY-COLOR);
  height: 39px;
  margin: 0.2rem;
  font-size: var(--FONT-SIZE);
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none;
  touch-action: none;
  cursor: pointer;
}

.keyboard-section__repeat-task,
.keyboard-section__remind-me-button,
.keyboard-section__due-date-button {
  border: var(--BORDER-NONE);
  background: var(--BACKGROUND);
  background-color: var(--PRIMARY-COLOR);
  padding: 0.5rem;
  flex-grow: 1;
  font-size: 1rem;
  cursor: pointer;
}

/* Virtual keyboard key press feedback
   Using :active because hover doesn't work reliably on touch devices.
   This ensures keys show visual feedback when tapped on phones and tablets.
*/
.keyboard__key:active,
.keyboard__shift-key:active,
.keyboard__symbol-switcher:active,
.keyboard__submit-button:active,
.keyboard__spacebar:active,
.keyboard__english-layout:active,
.keyboard__persian-layout:active,
.Persian-alphabet:active,
.keyboard__reverse-switcher:active,
.keyboard__backspace-key:active,
.keyboard-section__repeat-task:active,
.keyboard-section__remind-me-button:active,
.keyboard-section__due-date-button:active {
  background-color: whitesmoke;
}

/* some properties' value are hardcoded becuase they are not going to change in the future */
.keyboard-section__time-options {
  display: flex;
}

.keyboard-section__input-container {
  display: flex;
  gap: 0.6rem;
  background-color: rgb(255, 255, 255);
  align-items: center;
  padding: 0.4rem;
}

.keyboard-section__task-input {
  flex-grow: 1;
  overflow: hidden;
  max-height: 130px;
  word-break: break-all;
  white-space: pre-wrap;
}

.keyboard-section__circle {
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  border: 1px solid black;
  align-self: flex-end;
}

.keyboard-section__submit-task {
  border: var(--BORDER-NONE);
  background: var(--BACKGROUND);
  font-size: var(--FONT-SIZE);
  background-color: black;
  color: var(--PRIMARY-COLOR);
  padding: 0 0.5rem 0 0.5rem;
  cursor: pointer;
  align-self: flex-end;
}

.keyboard-section__submit-task:disabled {
  background-color: rgba(128, 128, 128, 0.491);
  cursor: not-allowed;
}

.keyboard-section__submit-task:hover {
  background-color: grey;
}

.toggle-visiblity {
  opacity: 0;
  pointer-events: none;
}

.keyboard-section__preview-feedback {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background-color: var(--PRIMARY-COLOR);
  font-size: 1.5rem;
  font-weight: 700;
  height: 50px;
  padding: 1rem;
  width: 40px;
  border-radius: 10px;
  position: fixed;
  opacity: 0;
  z-index: 1;
}

.keyboard__key--dragging {
  opacity: 0.6;
  transform: scale(0.93);
}

.keyboard__key--highlight {
  outline: 2px solid #4da3ff;
}

.highlight-shift {
  background-color: gold;
}

.highlight-shift:active {
  background-color: rgb(218, 165, 32);
}

.keyboard-section__task-input--caret::before {
  content: "|";
  color: blue;
  animation: blink 1s steps(1) infinite;
}

.caret::after {
  content: "|";
  color: blue;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* hover feedback for desktop with a mouse */
@media (hover: hover) {
  .keyboard__key:hover,
  .keyboard__backspace-key:hover,
  .keyboard__symbol-switcher:hover,
  .keyboard__submit-button:hover,
  .keyboard__spacebar:hover,
  .keyboard__english-layout:hover,
  .keyboard__persian-layout:hover,
  .keyboard__reverse-switcher:hover,
  .keyboard__shift-key:hover,
  .keyboard-section__repeat-task:hover,
  .keyboard-section__remind-me-button:hover,
  .keyboard-section__due-date-button:hover {
    background-color: whitesmoke;
  }
  .highlight-shift:hover {
    background-color: rgb(218, 165, 32);
  }
}