/* MOBILE FIRST */

:root {
  /* COLORS */
  --color-primary-black: #212121;
  --color-primary-dark: #4a4a4a;
  --color-primary-white: #fffefe;

  --color-light-lighter: #E0E0E6;
  --color-light: #f1eeee;
  --color-light-darkened: #eae6e6;

  --color-grey-lighter: #ccccd6;
  --color-grey: #ccc;
  --color-grey-transparent: rgba(204, 204, 204, 0.4);
  --color-grey-darker: #a5a5a5;

  --color-green: #4caf50;
  --color-green-darker: #319835;
  --color-green-dark: #18781b;
  --color-green-kught-transparent: rgba(127, 255,127, 0.1);
  --color-red: #f44336;
  --color-red-darker: #dc2b1e;
  --color-red-dark: #c3160a;
  --color-blue: #3498db;
  --color-blue-darker: #1a84ca;
  --color-blue-highlighted: #0f6aa7;
  --color-blue-dark: #085f98;

  /* BOX-SHADOW */

  --box-shadow:box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

  /* FONT-FAMILY */
  --font-family-title: "Rubik", sans-serif;
  --font-family-body: "Roboto", sans-serif;
  --font-size-body: 16px;
  --font-size-title: 28px;
  --font-weight-body: 400;
  --font-weight-medium: 500;
  --line-height-body: 1.5;

  /* TIMING */
  --timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-primary-black);
  background-color: var(--color-primary-white);
}

/* SUBMIT FORM WRAPPER */

.todo-form-wrapper {
  position: relative;
  margin-top: 40px;
}

@media screen and (min-width: 767px) {
  .todo-form-wrapper {
    margin-top: 64px;
  }
}

/* LANGUAGE PICKER */

.language-dropdown-picker {
  position: absolute;
  top: 24px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: end;
}

@media screen and (min-width: 375px) and (max-width: 767px) {
  .language-dropdown-picker {
    top: 24px;
    right: 24px;
  }
}

@media screen and (min-width: 768px) {
    .language-dropdown-picker {
      top: 40px;
      right: 32px;
    }
}

.language-dropdown-picker .dropdown-btn {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 8px;
  line-height: 0;
  border: none;
  background-color: transparent;
  transition: background-color 250ms var(--timing-function);
}

.language-dropdown-picker .lang-picker-icon {
  fill: var(--color-primary-black);
}

.language-dropdown-picker .lang-picker-icon-arrow {
  width: 0px;
  transform: scale(0);
  padding-bottom: 8px;
  transition: all 350ms var(--timing-function);
  fill:var(--color-primary-black);
}

.language-dropdown-picker .dropdown-btn:hover .lang-picker-icon-arrow,
.language-dropdown-picker .dropdown-btn:focus .lang-picker-icon-arrow {
  width: 16px;
  transform: scale(1);
}

.language-dropdown-picker .dropdown-content {
  width: fit-content;
  padding: 8px 4px;
  z-index: 1;
  border: 1px solid var(--color-grey);
  border-radius: 4px;
  background-color: var(--color-light);
  box-shadow: var(--box-shadow);
}

.language-dropdown-picker .dropdown-content-item {
  display: flex;
  justify-content: flex-start;
  column-gap: 8px;
  align-items: center;
  padding: 4px 16px;
  border-radius: 2px;
}

.language-dropdown-picker .is-current-lang {
visibility:visible;
}

.language-dropdown-picker .dropdown-content-item:hover,
.language-dropdown-picker .dropdown-content-item:focus {
  background-color: var(--color-light-lighter);
}

/* SUBMIT FORM */

.todo-form {
  position: relative;
  width: 100%;

  display: flex;
  flex-direction: column;

  margin-left: auto;
  margin-right: auto;
  padding: 64px 12px 32px 12px;

  border: 1px solid var(--color-grey);
  border-radius: 6px;
  background-color: var(--color-primary-white);
}

@media screen and (min-width: 375px) {
  .todo-form {
    max-width: 600px;
  }
}

@media screen and (min-width: 375px) and (max-width: 767px) {
  .todo-form {
    padding: 16px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .todo-form {
    padding: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .todo-form {
    padding: 32px;
  }
}

.todo-form .title {
  text-align: center;
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-title);
}

.todo-form .field-label {
  margin-top: 8px;
}

.todo-form .description,
.todo-form .priority {
  width: 100%;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid var(--color-grey);
  border-radius: 4px;
  font-size: var(--font-size-body);
  box-shadow: var(--box-shadow);
}

.todo-form .description:hover,
.todo-form .description:focus {
  border-color: var(--color-grey-darker);
}

.todo-form .description::placeholder {
  font-style: italic;
  color: var(--color-primary-dark);
}

.todo-form .priority {
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  background-image: url("data:image/svg+xml;utf8,<svg height='16' width='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill='%23212121' d='M8.471 10.471c-0.125 0.125-0.295 0.195-0.471 0.195s-0.346-0.070-0.471-0.195l-3.771-3.771c-0.064-0.061-0.114-0.135-0.149-0.216s-0.053-0.169-0.054-0.257c-0.001-0.089 0.016-0.176 0.050-0.258s0.083-0.156 0.146-0.219c0.063-0.063 0.137-0.112 0.219-0.146s0.17-0.050 0.258-0.050c0.089 0.001 0.176 0.019 0.257 0.054s0.155 0.086 0.216 0.149l3.3 3.3 3.3-3.3c0.126-0.121 0.294-0.189 0.469-0.187s0.342 0.072 0.466 0.195c0.124 0.124 0.194 0.291 0.195 0.466s-0.066 0.343-0.187 0.469l-3.771 3.771z'/></svg>");
  background-image-color: red;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position-x: calc(100% - 12px);
  background-position-y: 50%;
  background-color: var(--color-primary-white);
}

.todo-form .priority:hover,
.todo-form .priority:focus {
  background-color: var(--color-light);
}

.todo-form .submit-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  color: var(--color-primary-white);
  background-color: var(--color-green);
}

.todo-form .submit-btn:hover,
.todo-form .submit-btn:focus {
  background-color: var(--color-green-darker);
}

.todo-form .submit-btn:active {
  background-color: var(--color-green-dark);
}

.todo-form .submit-btn .submit-btn-icon {
  font-size: 24px;
  line-height: 0;
}

/* FILTER */

.todo-filter {
  width: 100%;

  margin-top: 24px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 24px;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;

  border-bottom: 1px solid var(--color-grey-transparent);;
}

@media screen and (min-width: 768px) {
  .todo-filter {
  max-width: 860px;
  }
}

.todo-filter .filter-btn {
  position: relative;
  padding: 8px 24px;
  border: none;
  border-radius: 4px;
  background-color: var(--color-blue);
  color: var(--color-primary-white);
}

.todo-filter .filter-btn:hover,
.todo-filter .filter-btn:focus {
  background-color: var(--color-blue-darker);
}

.todo-filter .filter-btn:active {
  background-color: var(--color-blue-dark);
}

.todo-filter .filter-btn.current-filter {
  background-color: var(--color-blue-highlighted);

border: 1px solid var(--color-grey);
  box-shadow: var(--box-shadow);
}

.todo-filter .filter-sort-sign {
  position: absolute;
  top: 50%;
  right: 9px;
  line-height: 0;
}

/* LIST OF TODO ITEMS */

.todo-list {
  max-width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 24px;
  gap: 8px;
}

@media screen and (min-width: 768px) {
  .todo-list {
    max-width: 900px;
  }
}

@media screen and (min-width: 1280px) { }

.todo-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 8px 12px;
  border: 1px solid var(--color-grey);
  border-radius: 5px;
  background-color: var(--color-primary-white);
}

@media screen and (min-width: 375px) {
  .todo-item {
    align-items: center;
    padding: 16px 24px;
  }
}

@media screen and (min-width: 768px) {
  .todo-item {
    flex-direction: row;
    align-items: flex-end;
    align-items: baseline;
    padding: 8px 24px;
  }
}

.todo-item .description {
  width: 100%;
}

.todo-item .priority {
    margin-top: 4px;
  color: var(--color-primary-dark);
  cursor: default;
}

@media screen and (min-width: 768px) {
  .todo-item .priority {
    margin-left: 24px;
    margin-right: 24px;
  }
}

.done {
  background-color: var(--color-green-kught-transparent);
}

.done .description,
.done .priority {
  text-decoration: line-through;
}

.todo-item .controls {
  width: 100%;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

@media screen and (min-width: 375px) {
  .todo-item .controls {
    width: fit-content;
    flex-direction: row;
    justify-content: flex-end;
    align-items: baseline;
    flex-wrap: nowrap;
    column-gap: 12px;
  }
}

@media screen and (min-width: 768px) {
  .todo-item .controls {
    min-width: 264px;
    flex-direction: row;
    justify-content: flex-end;
    align-items: baseline;
    flex-wrap: nowrap;
    column-gap: 12px;
  }
}

.todo-item .item-btn {
  width: 100%;
  display: flex;
  min-width: 128px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  color: var(--color-primary-white);
}

@media screen and (min-width: 375px) {
  .todo-item .item-btn {
    max-width: 128px;
  }
}

.todo-item .done-btn .done-btn-icon {
  font-size: 14px;
    line-height: 0;
}

.todo-item .done-btn {
  background-color: var(--color-green);
}

.todo-item .done-btn:hover,
.todo-item .done-btn:focus {
  background-color: var(--color-green-darker);
}

.todo-item .done-btn:active {
  background-color: var(--color-green-dark);
}

.todo-item .remove-btn .remove-btn-icon {
  font-size: 13px;
  line-height: 0;
}

.todo-item.done .done-btn {
  display: none;
}

.todo-item .remove-btn {
  background-color: var(--color-red);
}

.todo-item .remove-btn:hover,
.todo-item .remove-btn:focus {
  background-color: var(--color-red-darker);
}

.todo-item .remove-btn:active {
  background-color: var(--color-red-dark);
}

/* CLEAR STORAGE BUTTON */

.clear-storage {
  max-width: 900px;
  margin-top: 40px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

@media screen and (min-width: 375px) {
  .clear-storage {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .clear-storage {
    margin-bottom: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .clear-storage {
    margin-bottom: 40px;
  }
}

.clear-storage .clear-storage-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  border: none;
  border-radius: 4px;
  color: var(--color-primary-black);
  background-color: transparent;
  transition: transform 350ms var(--timing-function);
}

.clear-storage .clear-storage-btn:hover {
    transform: scale(1.15, 0.9);
}

.clear-storage .clear-icon-container,
.clear-storage .clear-icon-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  transition: all 350ms var(--timing-function);
}

.clear-storage .clear-storage-btn:hover .clear-icon-container,
.clear-storage .clear-storage-btn:focus .clear-icon-container {
  transform: translateY(4px);
}

.clear-storage .clear-storage-btn .clear-icon-lid-container {
  transition: all 350ms var(--timing-function);
}

.clear-storage .clear-storage-btn:hover .clear-icon-lid-container,
.clear-storage .clear-storage-btn:focus .clear-icon-lid-container {
  transform: rotate(-0.1turn);
}

.clear-storage .clear-icon {
  box-sizing: content-box;
  fill:var(--color-primary-black);
  transition: all 350ms var(--timing-function);
}

.clear-storage .clear-storage-btn:hover .clear-icon-lid,
.clear-storage .clear-storage-btn:focus .clear-icon-lid {
  fill: var(--color-red);
  transform: translate(-1px, -10px);
}

.clear-storage .clear-storage-btn:active .clear-icon-lid {
  fill: var(--color-red-dark);
}

.clear-storage .clear-storage-btn .clear-icon-body-container {
  transition: all 350ms var(--timing-function);
}

.clear-storage .clear-storage-btn:hover .clear-icon-body-container,
.clear-storage .clear-storage-btn:focus .clear-icon-body-container {
  transform: rotate(0.02turn);
}

.clear-storage .clear-storage-btn:hover .clear-icon-body,
.clear-storage .clear-storage-btn:focus .clear-icon-body {
    fill: var(--color-red);
  transform: translate(-1px, 2px);
}

.clear-storage .clear-storage-btn:active .clear-icon-body {
  fill: var(--color-red-dark);
}

/* CLEAR STORAGE TEXT */

.clear-storage .clear-storage-btn + .text-container {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  margin-bottom: -4px;
  transform: scaleY(0);
  cursor: auto;
  opacity: 0;
  transition: all 350ms var(--timing-function);
}

.clear-storage .text-container .descripting-text{
  font-size: 12px;
}

.clear-storage .clear-storage-btn:hover + .text-container,
.clear-storage .clear-storage-btn:focus + .text-container {
  color: var(--color-red);
  transform: scaleY(1);
  opacity: 1;
}

.clear-storage .clear-storage-btn:active + .text-container,
.clear-storage .clear-storage-btn:active + .text-container {
color: var(--color-red-dark);
  transform: scaleY(1);
  opacity: 1;
}

/* TASKS LIST STATUS */

.todo-status {
  max-width: 600px;
  margin-top: 24px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 8px 32px;
}