// Bookmarklet Pop Up Window
.mark-added {
    font-weight: 300;
    background: lighten($color_gray, 1%);
    .mark-added-block {  ///// feedback mesage across the top
        background: $color_darker;
        color: $color_white;
        padding: 18px 20px;
        font-size: 13px;
        //@include title-text;
        //word-spacing: 1px;
        line-height: 13px;
        font-weight: 600;
        box-shadow: 0 -1px 0 0 transparentize($color_dark_gray, .8) inset;
        i {
            float: right;
            margin-top: -3px;
            margin-right: -6px;
            width: 20px;
            height: 20px;
            background-size: 100%;
        }
    }
    .mark-added-info {  ///// mark title & url
        padding: 28px 20px 22px;
        color: $color_white;
        background: white;
        border-bottom: 1px solid transparentize($color_dark_gray, .86);
        h1 {
            font-weight: 400;
            color: $color_darker;
            font-size: 26px;
            margin: 0 0 10px 0;
            line-height: 1.2;
            @include unmark-truncate(380px);
        }
        span {
            color: darken($color_light, 25%);
            font-weight: 400;
            font-size: 12px;
            display: inline-block;
            @include unmark-truncate(380px);
        }
    }
    .mark-added-meta {
      padding: 28px 20px 0;
    }
    .mark-added-settings {
        font-size: 12px;
        //border-top: 1px solid #e5e5e5;
        //padding: 18px 20px;
        margin-bottom: 30px;
        color: $color_dark_gray;
        position: relative;
        //@include title-text;
        a {
            color: $color_dark_gray;
            //text-transform: uppercase;
            font-weight: 600;
            display: block;
            position: relative;
            padding-left: 20px;
            font-size: 13px;
            &.quick-tag { // Added by Colin
              display: inline;
              padding-left: 5px;
            }
            &#currLabel {
                position: absolute;
                left: 172px;
                top: 23px;
                padding-left: 0;
            }
            &:before {
                //@include unmark-label-ball(-3px, -9px, 20px);
            }
            &.label-2 {
                &:before {
                    background: $color_orange;
                }
                color: $color_orange;
            }
            &.label-3 {
                &:before {
                    background: $color_blue;
                }
                color: $color_blue;
            }
            &.label-4 {
                &:before {
                    background: $color_yellow;
                }
                color: $color_yellow;
            }
            &.label-5 {
                &:before {
                    background: $color_purple;
                }
                color: $color_purple;
            }
            &.label-6 {
                &:before {
                    background: $color_green;
                }
                color: $color_green;
            }
            &.label-7 {
                &:before {
                    background: $color_red;
                }
                color: $color_red;
            }
        }
        p {
          margin: 8px 0 0;
        }
        &.mark-added-note {
          .mark-added-note-box {
            background: white;
            border: 1px solid darken(desaturate($color_gray, 15%), 6%);
            border-radius: 2px;
            padding: 12px 14px;
            font-size: 13px;
            line-height: 1.5;
            color: lighten($color_dark, 5%);
            //min-height: 90px;
            transition: all .3s;
          }
          a {
            padding-left:0;
            text-transform: none;
            letter-spacing: normal;
            font-weight: 400;
            font-size: 13px;
            &:before {
                display:none;
            }
          }
        }
        h4 {
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: .01em;
          margin-top: 0;
          margin-bottom: 8px;
        }
        section {
            //display: none;
            //position: absolute;
            //background: $color_shade;
            //width: 100%;
            //left: 0px;
            //top: 45px;
            //opacity: .95;
            //padding: 10px 25px;
            color: $color_darker;
        }
        textarea {
            background: transparent;
            width: 100%;
        //    opacity: .95;
            padding: 0;
            color: darken($color_darker, 15%);
            border: none;
            overflow: auto;
            resize: none;
            height: 60px;
            font-size: 14px;
            font-family: $sans-serif;
            @include font-smoothing;
        }
        :-webkit-input-placeholder {
            @include font-smoothing;
            text-transform: none;
        }
        ::-moz-placeholder {
            @include font-smoothing;
            text-transform: none;
        }
        :-ms-input-placeholder {
            @include font-smoothing;
            text-transform: none;
        }
        &.mark-added-label {
          height: 40px;
          margin-bottom: 30px;
          section {
            padding: 0;
            top: 23px;
            left: 25px;
            z-index: 999;
          }
        }
        #label-chosen {
            position: absolute;
            left: 172px;
            top: 22px;
            z-index: 9999;
            display: none;
            font-size: 13px;
            font-weight: 600;
            min-width: 80px;
            color: $color_dark_gray;
            background: lighten($color_gray, 1%);
            padding-top: 1px;
            //@include title-text;
            @include font-smoothing;
            &.label-2 { color: $color_orange; }
            &.label-3 { color: $color_blue; }
            &.label-4 { color: $color_yellow; }
            &.label-5 { color: $color_purple; }
            &.label-6 { color: $color_green; }
            &.label-7 { color: $color_red; }
        }

        /////// Tag Input Replacement
        .selectize-control {
          &.multi {
            .item {
              background: #62b3e4;
              border-radius: 3px;
              border: none;
              box-shadow: none;
              text-shadow: none;
              margin: 2px 3px 2px 2px;
              font-size: 12px;
              padding: 2px 6px 2px 7px;
              &:last-of-type {
                margin-right: 6px;
              }
              &.active {
                background: darken(#62b3e4, 12%);
                border-radius: 3px;
                border: none;
                box-shadow: none;
                text-shadow: none;
              }
            }
          }
          .selectize-input {
            background: white;
            border: 1px solid darken(desaturate($color_gray, 15%), 6%);
            border-radius: 2px;
            box-shadow: none;
            padding: 10px 12px;
            font-size: 13px;
            line-height: 1.5;
            color: lighten($color_dark, 5%);
            transition: all .3s;
            min-height: 40px;
            &.has-items {
              padding: 6px;
            }
            div {
              color: white;
            }
          }
          .selectize-dropdown {
            border: 1px solid darken(desaturate($color_gray, 15%), 6%);
            background: #fff;
            margin: -1px 0 0 0;
            border-top: 0 none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 0 0 3px 3px;
            box-shadow: 0 12px 12px -16px transparentize($color_darkest, .8);
            overflow: hidden;
            .selectize-dropdown-content {
              .create {
                padding: 10px;
                background: white;
                color: $color_darkest;
              }
            }
          }
          &.plugin-remove_button {
             .remove {
               width: 18px;
               font-weight: 500;
               font-size: 16px;
               display: flex;
               flex-direction: column;
               height: 100%;
               justify-content: center;
               align-items: center;
               padding: 0 0 1px 1px;
               box-shadow: 1px 0 0 0 transparentize(white, .8) inset;
               border: none;
               border-radius: 0 3px 3px 0;
               @include sm {
                 &:hover {
                   background: transparentize(darken(#62b3e4, 25%), .84);
                 }
               }
             }
          }
        }

    }
    .mark-added-note {
        //border-bottom: 1px solid #e5e5e5;
    }
    .mark-added-actions {
        padding: 6px 15px 24px;
        //background: lighten($color_gray, 1%);
        //position: absolute;
        //bottom: 0;
        width: 100%;
        display: flex;
        .delete-button {
            flex-basis: 45%;
            padding: 0 5px;
        }
        .update-button {
          flex-basis: 55%;
          flex-grow: 1;
          padding: 0 5px;
          &:only-child {}
        }
        button {
            width: 100%;
            color: $color_white;
            background: darken($color_blue, 5%);
            padding: 12px 0 14px;
            //@include title-text;
            @include font-smoothing;
            text-transform: uppercase;
            letter-spacing: .01em;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 700;
            //box-shadow: 0 30px 60px -24px transparentize(white, .94) inset, 0 2px 7px 0 transparentize($color_dark_gray, .8);
            //box-shadow: 0 30px 60px -24px transparentize(white, .94) inset, 0 2px 7px 0 transparentize(darken($color_blue, 25%), .7);
            &.delete {
                //width: 39%;
                background: $color_red;
                margin-right: 0;
                //box-shadow: 0 30px 60px -24px transparentize(white, .94) inset, 0 2px 7px 0 transparentize(darken($color_red, 25%), .7);
            }
        }
    }
    .mark-added-upgrade {
        text-align: center;
        color: $color_dark;
        padding: 35px 15%;
        line-height: 28px;
        a { color: $color_dark; text-decoration:underline; }
        button {
            margin-top:25px;
        }
    }
    &[data-label="2"] {
        .mark-added-settings ul.label-choices li {
            &.label-2 a:before {
                box-shadow: 0 0 0 3px lighten($color_gray, 2%), 0 0 0 4px darken($color_gray, 14%);
            }
        }
    }
}

// Label List
.mark-added-settings ul.label-choices, ul.sidebar-label-list {
    margin: 0;
    padding:0;
    float: left;
    li {
        list-style: none;
        display: block;
        float: left;
        a {
            display: block;
            color: $color_dark_gray;
            text-align: left;
            padding: 10px 0 10px 24px;
            position: relative;
            font-size: 12px;
            &:focus, &:active {
                outline: 0;
            }
            &:before {
                @include unmark-label-ball(2px, 0px, 16px);
                //opacity: 0.3;
            }
            &:hover {
                &:before {
                    opacity: 1;
                }
            }
            span {
                display: none;
            }
        }
        &.label-2 {
          a {
            color: $color_orange_text;
            &:before { background: $color_orange !important;}
          }
        }
        &.label-3 {
          a {
            color: $color_blue_text;
            &:before { background: $color_blue !important;}
          }
        }
        &.label-4 {
          a {
            &:before { background: $color_yellow !important;}
          }
        }
        &.label-5 {
          a {
            color: $color_purple;
            &:before { background: $color_purple !important;}
          }
        }
        &.label-6 {
          a {
            color: $color_green_text;
            &:before { background: $color_green !important;}
          }
        }
        &.label-7 {
          a {
            color: $color_red;
            &:before { background: $color_red !important;}
          }
        }
    }
}
.mark-added-label {
  &.label-2 {
    .label-choices {
      li a { &:before { box-shadow: none; } }
      .label-2 {
        a { &:before { box-shadow: 0 0 0 3px #fbfcfd, 0 0 0 4px #c3d9e4; } }
      }
    }
  }
  &.label-3 {
    .label-choices {
      li a { &:before { box-shadow: none; } }
      .label-3 {
        a { &:before { box-shadow: 0 0 0 3px #fbfcfd, 0 0 0 4px #c3d9e4; } }
      }
    }
  }
  &.label-4 {
    .label-choices {
      li a { &:before { box-shadow: none; } }
      .label-4 {
        a { &:before { box-shadow: 0 0 0 3px #fbfcfd, 0 0 0 4px #c3d9e4; } }
      }
    }
  }
  &.label-5 {
    .label-choices {
      li a { &:before { box-shadow: none; } }
      .label-5 {
        a { &:before { box-shadow: 0 0 0 3px #fbfcfd, 0 0 0 4px #c3d9e4; } }
      }
    }
  }
  &.label-6 {
    .label-choices {
      li a { &:before { box-shadow: none; } }
      .label-6 {
        a { &:before { box-shadow: 0 0 0 3px #fbfcfd, 0 0 0 4px #c3d9e4; } }
      }
    }
  }
  &.label-7 {
    .label-choices {
      li a { &:before { box-shadow: none; } }
      .label-7 {
        a { &:before { box-shadow: 0 0 0 3px #fbfcfd, 0 0 0 4px #c3d9e4; } }
      }
    }
  }

}
