/* --------- ICON (is this used?) --------- */ 

.saveWordIcon {
  display: inline-block;
  cursor: pointer;
  border: 1;
  height: 46px;
  position: absolute;
  right: 9em;
  top: 0.8em;
  background-color: transparent;
  border-color: white;
  color: white;
}

.saveWordIcon.change {
    top: .65em;
    border-color: black;
    color: black;
}

/* --------- POPUP --------- */ 

.saveWordPopup {
    display: none;
    background-color: rgb(28, 63, 73);
    color: white;
    margin: 0 1em 1em 1em;
    padding: 1em 0em 0 0em;
    font-size: 0.5em;
    margin-left: max(env(safe-area-inset-left), 1em);
    margin-right: max(env(safe-area-inset-right), 1em);

    /* move feedback button behind settings element */
    position: relative;
    z-index: 10;
    margin-bottom: 0;
    padding-bottom: 0.5em;
}

/* --------- WORD LIST --------- */ 

.savedWordsList a {
    color: white;
}

.savedWordsList a:hover {
    text-decoration: underline;
}

.savedWordsList {
    list-style-type: none;
}

.savedWordsList li {
    margin-top: .6em;
}

/* --------- SAVE BUTTON --------- */ 

.saveWordsButton {
    background-color: #D7E9EC;
    color: black;
    font: inherit;
    padding: 0.1em .5em 0.2em 0.5em;
    margin: 0.2em .8em 0.1em 1em;
    border: none;
    border-radius: 0.3em;
    cursor: pointer;
}

.saveWordsButton:disabled {
    background-color: #BFCED0;
    color: #415558;
    cursor: not-allowed;
}

/* --------- REMOVE BUTTON --------- */ 

.removeOneSavedWordButton {
    border: 1px solid;
    cursor: pointer;
    display: inline;
    margin-left: .7em;
    padding-left: .4em;
    padding-right: .4em;
    text-align: center;
    border-radius: 0.3em;

    border-color: transparent;
    background-color: #D7E9EC;
    color: black;
}

.removeOneSavedWordButton .savedWordsList a:hover {
    text-decoration: underline;
}

/* --------- SAVE MESSAGE --------- */ 

.saveMessage {
  margin-left: 10px;
  opacity: 0;
  /*transition: opacity 0.25s;*/
  transition: opacity 150ms ease;
}

.saveMessage.show {
  opacity: 1;
}

/* --------- NO HOVER BUTTON COLOR ON PHONE (ELSE BUGGY) --------- */

@media (hover: hover) and (pointer: fine) {
    .saveWordsButton:not(:disabled):hover {
        background-color: #3FD695;
    }

    .removeOneSavedWordButton:hover {
        background-color: #3FD695;
        color: #1C3F49;
        border-color: #3FD695;
    }
}

/* --------- DARK MODE --------- */

@media (prefers-color-scheme: dark) { 
    .saveWordsList a {
        text-decoration: none !important;
    }

    .saveWordsList a:hover {
        text-decoration-color: white;
    }
}