/* UTILS */

.cc-hidden {
  display: none;
}

.cc-noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

/* CONTENT */

$main-color: #3C465B;

.cc-container {
  position: fixed;
  right: 0;
  bottom: 0;

  z-index: 9998;

  flex-wrap: nowrap;

  height: auto;
  width: 552px; /* .cc-box width + margin */

  font-family: Helvetica, Calibri, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  color: $main-color;

  opacity: 0;
  display: none;

  &.displayed {
    opacity: 1;
    display: flex;
    animation: fadein 2s;
  }

  a {
    color: inherit;
  }
}

.cc-box {
  display: block;
  margin: 16px;
  width: 520px;
  box-shadow: 0px 4px 16px 0 rgba(0,0,0,.16);
  padding: 16px;
  background-color: #fff;
}

.cc-title {
  font-size: 1.8em;
  font-weight: 400;
  padding: 16px 0 4px 0;
}

.cc-content {
  padding: 16px 0;
  min-height: 60px;
}

.cc-buttons {
  float: right;
  margin-top: 16px;
}

.cc-btn {
  display: inline-block;
  padding: 10px 12px;
  margin-left: 12px;
  line-height: 1em;
  cursor: pointer;

  -webkit-transition: all .25s ease-in-out;
     -moz-transition: all .25s ease-in-out;
          transition: all .25s ease-in-out;
}

.cc-btn-settings {
  &:hover{
    background: #E9EBF0;
  }
}

.cc-btn-reject {
  background: #C8CDD8;
  color: #000;

  &:hover{
    background: #DADFE9;
  }
}

.cc-btn-accept {
  background: $main-color;
  color: #fff;

  &:hover{
    background: #646E81;
  }
}

.cc-categories {
  float: left;
  width: 25%;
  font-size: 1.1em;

  div[role="checkbox"] {
    width: 100%;
    margin-top: 4px;
    margin-left: 8px;
  }

  span[role="link"] {
    outline: none;
    border-bottom: 1px solid $main-color;
    padding-bottom: 0.1em;
  }
}

.cc-category-description {
  float: right;
  width: 75%;
}

/* MEDIA */

@media(max-width: 600px) {
  .cc-container {
    width: auto;
  }
  .cc-box {
    width: auto;
  }
  .cc-buttons {
    text-align: right;
  }
  .cc-btn-settings {
    display: block;
    clear: both;
    margin-bottom: 4px;
  }
  .cc-categories {
    float: none;
    width: 100%;
  }
  .cc-category-description {
    float: none;
    width: 100%;
    margin-top: 16px;
  }
}