@use '../config';

#tarteaucitron-back {
  background: config.$gdprcst-color-light;
  display: none;
  height: 100%;
  left: 0;
  opacity: 0.7;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2147483646;
}

#tarteaucitron {
  border-bottom: 2px solid config.$gdprcst-color-mid !important;
  display: none;
  height: 100%;
  overflow: scroll;
  padding: 0;
  position: fixed;
  z-index: 2147483647;

  #tarteaucitron-close-panel {
    color: config.$gdprcst-color-mid;
    cursor: pointer;
    font-size: 1.5em;
    margin: 2%;
    opacity: 0.7;
    position: absolute;
    right: 0;
    transition: opacity 0.3s;

    &:hover {
      opacity: 1;
    }
  }

  #tarteaucitron-services {
    align-items: center;
    background: config.$gdprcst-color-light;
    display: flex;
    flex-direction: column;

    .tarteaucitron-h3 {
      align-items: center;
      color: config.$gdprcst-color-mid;
      display: flex;
      margin: 8% 0 2%;

      &::before {
        background-color: config.$gdprcst-color-mid;
        content: '';
        display: inline-block;
        height: 3px;
        margin-right: 10px;
        width: 15px;
      }
    }

    .tarteaucitron-hidden {
      display: none;
      position: relative;
    }
  }

  #tarteaucitron-services-top {
    padding: 20px 0;

    .tarteaucitron-h1 {
      color: config.$gdprcst-color-mid;
      font-size: 1rem;
      margin-top: 10px;
      text-align: center;
      text-transform: uppercase;
    }

    .tarteaucitron-line {
      margin: 0 5%;

      .tarteaucitron-h3 {
        margin: 0;
      }
    }

    #tarteaucitron-info {
      border-bottom: solid 1px config.$gdprcst-color-mid;
      border-top: solid 1px config.$gdprcst-color-mid;
      font-size: 0.9rem;
      line-height: 1.2em;
      margin: 5%;
      padding: 20px 0;
      text-align: center;
    }

    .tarteaucitron-ask {
      display: flex;
      justify-content: space-around;

      #tarteaucitron-all-allowed,
      #tarteaucitron-all-denied {
        background-color: transparent;
        border: solid 2px config.$gdprcst-color-mid;
        color: config.$gdprcst-color-mid;
        font-size: 0.7rem;
        margin-top: 2%;
        opacity: 0.5;
        padding: 8px;
        text-transform: uppercase;
        transition:
          background-color 0.3s,
          color 0.3s,
          opacity 0.3s;

        &:hover {
          cursor: pointer;
          opacity: 1;
        }

        &.tarteaucitron-is-selected {
          background-color: config.$gdprcst-color-mid;
          color: config.$gdprcst-color-light;
          opacity: 1;
        }
      }
    }
  }

  #tarteaucitron-services-list {
    border-top: solid 2px config.$gdprcst-color-mid;
    margin: 0 0 25px;

    .tarteaucitron-title {
      margin-top: 10%;

      button {
        background: config.$gdprcst-color-mid;
        color: config.$gdprcst-color-light;
        cursor: pointer;
        display: inline-block;
        font-family: config.$gdprcst-font-family-title;
        font-size: 0.8rem;
        font-weight: 700;
        padding: 2%;
        text-align: left;
      }
    }

    .tarteaucitron-details {
      background: config.$gdprcst-color-light;
      border: solid 1px config.$gdprcst-color-mid !important;
      box-shadow: -3px 3px 10px config.$gdprcst-shadow-color;
      color: config.$gdprcst-color-mid;
      display: none;
      font-family: config.$gdprcst-font-family-text;
      font-size: 10px;
      line-height: 1.3em;
      margin: 0 0 0 25px;
      max-width: 270px;
      padding: 20px;
      position: absolute;
      text-align: left;
      width: auto;
      z-index: 2147483647;
    }
  }

  .tarteaucitron-cookie-group {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 8% 10%;

    .tarteaucitron-cookie-text {
      font-size: 0.9rem;
      width: 100%;

      .tarteaucitron-h3 {
        margin-top: 0 !important;
      }

      .tarteaucitron-description {
        line-height: 1.1em;
        text-align: center;
      }

      a {
        color: config.$gdprcst-color-mid;
        display: block;
        font-family: config.$gdprcst-font-family-text;
        font-size: 0.8rem;
        font-weight: 400;
        margin-top: 5px;

        &::before {
          content: '→ ';
        }
      }
    }

    .tarteaucitron-cookie-buttons {
      align-items: center;
      display: flex;
      justify-content: center;
      margin-top: 8%;
      width: 100%;

      button {
        color: config.$gdprcst-color-mid;
        font-size: 0.8rem;
      }
    }

    .tarteaucitron-switch-state {
      color: config.$gdprcst-color-mid;
      cursor: pointer;
      font-family: config.$gdprcst-font-family-text;
      font-size: 0.8rem;
      margin: 0 10px;
      opacity: 0.4;
      padding: 0 !important;
      transition: opacity 0.3s;

      &:hover {
        border-bottom: solid 1px config.$gdprcst-color-mid;
        opacity: 1;
      }

      &.active {
        border-bottom: solid 1px config.$gdprcst-color-mid;
        opacity: 1;
      }

      &.solo {
        cursor: auto;
        opacity: 0.4;

        &:focus {
          border-bottom: 0;
        }
      }
    }

    .tarteaucitron-switch {
      background: config.$gdprcst-color-mid;
      border: solid 1px config.$gdprcst-color-mid;
      border-radius: 15px;
      cursor: pointer;
      height: 17px;
      opacity: 0.5;
      position: relative;
      transition: opacity 0.4s;
      width: 42px;

      .tarteaucitron-switch-button {
        background-color: config.$gdprcst-color-light;
        border: solid 1px config.$gdprcst-color-mid;
        border-radius: 15px;
        color: config.$gdprcst-color-mid;
        cursor: pointer;
        font-size: 1rem !important;
        height: 22px;
        margin: 0 !important;
        margin-left: 50% !important;
        margin-top: 50% !important;
        padding: 0 !important;
        position: absolute;
        transform: translate(-50%, -100%);
        width: 22px;
      }

      &.switch-allowed {
        opacity: 1;

        .tarteaucitron-switch-button {
          left: 0;
          margin-left: 0 !important;
          transform: translate(0, -100%) !important;
        }
      }

      &.switch-denied {
        opacity: 1;

        .tarteaucitron-switch-button {
          margin-left: 0 !important;
          right: 0;
          transform: translate(0, -100%) !important;
        }
      }
    }
  }

  #tarteaucitron-services-bottom {
    padding-top: 20px;
    text-align: center;

    #tarteaucitron-save-responses {
      background-color: transparent;
      border: solid 2px config.$gdprcst-color-mid;
      color: config.$gdprcst-color-mid;
      font-size: 0.7rem;
      padding: 8px;
      text-transform: uppercase;
      cursor: pointer;
      transition:
        background-color 0.3s,
        color 0.3s;

      &:hover {
        background-color: config.$gdprcst-color-mid;
        color: config.$gdprcst-color-light;
      }
    }
  }
}

/////////////////////////////////////////////
// Responsive layout for the control panel //
/////////////////////////////////////////////
@media screen and (device-width >= 728px) {
  #tarteaucitron {
    #tarteaucitron-services {
      .tarteaucitron-h3 {
        font-size: 1rem;
      }
    }

    #tarteaucitron-services-top {
      .tarteaucitron-h1 {
        font-size: 1.1rem;
        margin-top: 0;
      }

      #tarteaucitron-info {
        font-size: 1rem;
        margin: 20px auto;
        width: 70%;
      }

      .tarteaucitron-line {
        margin: 0 auto;
        width: 70%;
      }
    }

    #tarteaucitron-services-list {
      width: 100%;

      .tarteaucitron-cookie-group {
        margin: 5% auto;
        width: 70%;
      }

      .tarteaucitron-cookie-text {
        .tarteaucitron-description {
          font-size: 0.9rem;
          line-height: 1.5em;
        }
      }

      .tarteaucitron-cookie-buttons {
        button,
        .tarteaucitron-switch-state {
          font-size: 0.9rem;
        }
      }

      .tarteaucitron-title {
        margin-top: 5%;

        button {
          font-size: 1rem;
          padding: 1% 1% 1% 8%;
        }
      }

      .tarteaucitron-details {
        font-size: 0.8rem;
      }
    }

    #tarteaucitron-services-bottom {
      padding-bottom: 20px;
    }
  }
}

@media screen and (device-width >= 1020px) {
  #tarteaucitron-root {
    #tarteaucitron {
      border: solid 2px config.$gdprcst-color-mid;
      height: 90%;
      top: 50vh;
      transform: translateY(-50%);
      width: 75%;
    }
  }

  #tarteaucitron {
    #tarteaucitron-services-top {
      #tarteaucitron-info,
      .tarteaucitron-line {
        width: 80%;
      }

      #tarteaucitron-info {
        font-size: 0.8rem;
        line-height: 1.1rem;
        padding: 1.5% 0;
      }

      .tarteaucitron-ask {
        #tarteaucitron-all-allowed,
        #tarteaucitron-all-denied {
          font-size: 0.8rem;
          padding: 10px;
        }
      }
    }

    #tarteaucitron-services-list {
      margin: 0;

      .tarteaucitron-cookie-group {
        flex-direction: row;
        justify-content: space-between;
        margin: 3% auto;
        width: 80%;

        .tarteaucitron-cookie-text {
          width: 60%;
        }

        .tarteaucitron-cookie-buttons {
          flex-grow: 0;
          margin-top: 0;
          width: auto;
        }
      }

      .tarteaucitron-details {
        font-size: 0.7rem;
        line-height: 1.4em;
      }
    }
  }
}

@media screen and (device-width >= 1224px) {
  #tarteaucitron-root {
    #tarteaucitron {
      overflow: hidden;
      width: 60%;

      #tarteaucitron-services {
        height: 100%;
        overflow: hidden;
      }

      #tarteaucitron-services-top {
        padding: 30px 0 20px;

        #tarteaucitron-info {
          width: 50%;
        }

        .tarteaucitron-line {
          align-items: center;
          display: flex;
          margin: 0 auto;
          width: 70%;

          .tarteaucitron-ask {
            flex-grow: 1;
            justify-content: flex-end;
          }

          #tarteaucitron-all-allowed {
            margin-right: 5%;
          }

          #tarteaucitron-all-allowed,
          #tarteaucitron-all-denied {
            font-size: 0.8rem;
            margin-top: 0;
            padding: 6px;
          }
        }
      }

      #tarteaucitron-services-list {
        overflow-y: scroll;

        .tarteaucitron-title {
          button {
            padding: 0.5% 0.5% 0.5% 15%;
          }
        }

        .tarteaucitron-cookie-group {
          width: 70%;
        }
      }
    }
  }
}