.nav-btn-thin {
  width: 65px;
  height: 65px;
  background-color: transparent;
  border: 2px solid DimGrey;
  border-radius: 50px;
  transition: border-radius 0.4s ease;
  & svg {
    filter: invert(20%);
  }
}
.nav-btn-light {
  width: 65px;
  height: 65px;
  background-color: Gainsboro;
  border: none;
  border-radius: 50px;
  transition: border-radius 0.4s ease;
  & svg {
    filter: invert(30%);
  }
}
.nav-btn-dark {
  width: 65px;
  height: 65px;
  background-color: DimGrey;
  border: none;
  border-radius: 50px;
  transition: border-radius 0.4s ease;
  & svg {
    filter: invert(100%);
  }
}
.nav-btn-light-grad {
  width: 65px;
  height: 65px;
  background-image: linear-gradient(220deg, cyan, darkturquoise);
  border: none;
  border-radius: 50px;
  transition: border-radius 0.4s ease;
  & svg {
    filter: invert(100%);
  }
}
.nav-btn-mid-grad {
  width: 65px;
  height: 65px;
  background-image: linear-gradient(40deg, hotpink, lightsalmon);
  border: none;
  border-radius: 50px;
  transition: border-radius 0.4s ease;
  & svg {
    filter: invert(100%);
  }
}
.nav-btn-dark-grad {
  width: 65px;
  height: 65px;
  background-image: linear-gradient(220deg, mediumslateblue, mediumorchid);
  border: none;
  border-radius: 50px;
  transition: border-radius 0.4s ease;
  & svg {
    filter: invert(100%);
  }
}
.activity-picker {
  max-width: 680px;
  margin: 0 auto;
  background-color: Whitesmoke;
}
.picker-item {
  min-width: 180px;
  height: 180px;
  flex-grow: 1;
  background-color: White;
  & i {
    color: Grey;
  }
  &:hover {
    box-shadow: 2px 2px 12px Lightgrey;
  }
}
.picker-btn-light {
  width: 60px;
  height: 60px;
  background-color: Gainsboro;
  border: 2px solid Gainsboro;
  border-radius: 15px;
  & svg {
    filter: invert(35%);
  }
}
.picker-btn-dark {
  width: 60px;
  height: 60px;
  background-color: DimGrey;
  border: 2px solid DimGrey;
  border-radius: 15px;
  & svg {
    filter: invert(95%);
  }
}
.picker-btn-light-grad {
  width: 60px;
  height: 60px;
  background-image: linear-gradient(220deg, cyan, darkturquoise);
  border: none;
  border-radius: 15px;
  & svg {
    filter: invert(100%);
  }
}
.picker-btn-mid-grad {
  width: 60px;
  height: 60px;
  background-image: linear-gradient(40deg, hotpink, lightsalmon);
  border: none;
  border-radius: 15px;
  & svg {
    filter: invert(100%);
  }
}
.picker-btn-dark-grad {
  width: 60px;
  height: 60px;
  background-image: linear-gradient(220deg, mediumslateblue, mediumorchid);
  border: none;
  border-radius: 15px;
  & svg {
    filter: invert(100%);
  }
}
.ql-nav-light {
  color: DimGrey;
  background-color: Gainsboro;
}

.ql-nav-dark {
  color: White;
  background-color: DimGrey;
}

.ql-nav-thin {
  color: DimGrey;
  background-color: transparent;
  border: 1px solid DimGrey;
  &.ql-navItem {
    border: 1px solid DimGrey;
    margin-top: -1px;
    margin-right: -1px;
  }
}

.ql-navBar {
  min-width: 200px;
}

.ql-navItem {
  min-width: 240px;
  max-width: 240px;
  flex-grow: 1;
  font-weight: 400;
  text-align: center;
  padding: 16px;
  border: 1px solid White;
}

@media (hover: hover) {
  .ql-navItem.ql-nav-light:hover {
    background-color: DimGrey;
    color: Whitesmoke;
    box-shadow: none;
  }
  .ql-navItem.ql-nav-dark:hover {
    background-color: Gainsboro;
    color: DimGrey;
    box-shadow: none;
  }
  .ql-navItem.ql-nav-thin:hover {
    border: 1px solid DimGrey;
    color: DodgerBlue;
  }
}