$buttonSize: 40px;
$buttonFontSize: 12px;
$textButtonFontSize: 12px;
$buttonLineHeight: 45px;

$hi-green-dark-2: #1d8500;
$hi-green-dark-1: #29ba00;
$hi-green: #5fff32;
$hi-green-light-1: #8f6;
$hi-green-light-2: #afff98;
$hi-green-light-3: #d7ffcc;
$white: #fff;
$cc-charcoal: #3f3f3f;
$cc-charcoal-hint: #828282;
$cc-charcoal-light-1: #979797;
$cc-charcoal-light-2: #dfdfdf;
$cc-teal-dark-2: #016082;
$cc-teal-dark-1: #0481a0;
$cc-teal: #0592af;
$cc-teal-light-1: #2ba5c1;
$cc-teal-light-2: #6fc6da;
$cc-teal-light-3: #93d5e4;
$cc-teal-light-4: #b7e2ec;
$cc-teal-light-5: #cdebf2;
$cc-teal-light5B: #D8EFF5;
$cc-teal-light-6: #e2f4f8;
$cc-teal-light-7: #f5fbfc;
$cc-orange-dark-1: #ea6d2f;
$cc-orange: #ff8415;
$cc-orange-light-1: #ffa350;
$cc-orange-light-2: #ffc18a;
$cc-orange-light-3: #ffcea1;
$cc-orange-light-4: #ffe6d0;
$cc-orange-light-4-b: #ffeddc;
$cc-orange-light-5: #fff2e7;
$cc-orange-light-6: #fff9f3;
$feedback-green-light-4: #dcecde;
$feedback-green: #4ea15a;
$hi-yellow-light-3: #fffebf;
$cc-logo-text: #231f20;
$facebook-blue: #1877f2;
$twitter-blue: #1da1f2;
$activity-blue: #31b6ff;
$activity-yellow: #edd200;
$activity-red: #ff234e;
$activity-green: #1bdf00;
$activity-purple: #e325af;

$buttonColor: $cc-teal-light-7;
$borderRadius: 8px;
$border-width: 1.5px;
$border: $border-width solid $cc-charcoal-light-1;

$text: Arial, sans-serif;

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

.dt-container {
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0,0,0,0);

  .dt-canvas-container {
    vertical-align: top; // not needed but why not
    display: inline-block;
    outline: 0;

    &.with-border {
      border: $border;
      border-radius: 0 $borderRadius $borderRadius 0;
      canvas {
        border-radius: 0 $borderRadius $borderRadius 0;
      }
    }
  }

  .dt-tools {
    display: inline-block;
    vertical-align: top;
    width: $buttonSize;
    margin: 0;
    position: relative;

    background-color: #f5fbfc;

    border: $border;
    border-radius: $borderRadius 0 0 $borderRadius;
    border-right: none;

    /* the following unset boostrap styles set in the question-interactives */
    -webkit-box-sizing: initial;
    box-sizing: initial;
    img {
      vertical-align: initial;
    }
  }

  .dt-btn {
    z-index: 1000;
    display: block;
    overflow: hidden;
    position: relative;
    text-indent: 0;
    white-space: nowrap;
    font-size: $buttonFontSize;
    line-height: $buttonLineHeight;
    height: $buttonSize;
    width: $buttonSize;
    color: $cc-charcoal;
    background: $buttonColor;
    vertical-align: middle;
    text-align: center;
    padding: 0;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    &:hover {
      background: $cc-teal-light5B;
      cursor: pointer;
    }

    &.dt-active {
      background: $cc-teal-light-4;
    }

    &.dt-locked {
      cursor: default;

      img {
        opacity: 0.35;
      }
    }

    // Text buttons:
    &.dt-text-btn {
      font-size: $textButtonFontSize;
      font-family: $text;
      width: auto;
      padding: 0 3px;
      border-top: $border;
      border-right: $border;
      border-bottom: $border;
      line-height: $buttonSize;
      margin-top: -1px;

      &.dt-active {
        border-right: $border-width solid $cc-teal-light-4;
      }
    }

    &.dt-img-btn {
      position: relative;
      line-height: normal;
      span {
        // To make rotation work in all browsers (used during waiting for image load).
        display: inline-block;
      }
      img {
        max-width: $buttonSize * 0.8;
        max-height: $buttonSize * 0.9;
        width: initial !important;
        height: initial !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    // Stroke and fill color buttons:
    &.dt-stroke-color:before, &.dt-fill-color:before {
      content: '';
      background: #fff;
      position: absolute;
      top: 8px;
      left: 8px;
      width: 24px;
      height: 24px;
    }

    &.dt-stroke-color {
      .dt-inner1 { /* inset/overlay white box with black border */
        background: #fff;
        position: absolute;
        height: 12px;
        width: 12px;
        left: 5px;
        top: 5px;
      }
      .dt-inner2 { /* inset/overlay blue box with no border */
        background: #3e8acc;
        border: none;
        position: absolute;
        height: 10px;
        width: 10px;
        left: 6px;
        top: 6px;
      }
    }

    &.dt-first {
      border-radius: ($borderRadius * 0.8) 0 0 0;  /* the 0.8 removes the border gap between the button and the container */
    }

    &.dt-last {
      border-radius: 0 0 0 ($borderRadius * 0.8);  /* the 0.8 removes the border gap between the button and the container */
    }

    &.dt-separator-after {
      border-bottom: $border;
    }

    .dt-color {
      background: #fff;
      overflow: hidden;
      position: absolute;
      top: 9px;
      left: 9px;
      width: 22px;
      height: 22px;

      &.dt-no-color:after {
        content: 'L';
        color: #e66665;
        position: absolute;
        left: -12px;
        bottom: -14px;
        font-size: 50px;
      }
    }

    // Color buttons:
    &.dt-transparent {
      background: #f4f4f4;
      &:after {
        content: 'L';
        color: #e66665;
        position: absolute;
        left: -32px;
        bottom: -16px;
        font-size: 100px;
      }
    }

    // Undo and redo buttons, send to front and back buttons:
    &.dt-send-to, &.dt-undo-redo {
      // These icons are placed somehow lower, modify line-height to move them up.
      line-height: 41px;
    }
  }

  .dt-expand {
    position: relative;
    &:after {
      position: absolute;
      display: block;
      content: ' ';
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cg%3E%3Cpath d='M0 0H40V40H0z' transform='translate(-1947.000000, -892.000000) translate(1947.000000, 892.000000)'/%3E%3Cpath fill='%230481A0' d='M7 0L7 7 0 7z' transform='translate(-1947.000000, -892.000000) translate(1947.000000, 892.000000) translate(28.500000, 29.500000)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
      // background-image: url('../assets/menu-secondary-caret.svg');
      bottom: -0;
      right: 0;
      width: $buttonSize;
      height: $buttonSize;
    }
  }

  .dt-selected-line-width {
    position: absolute;
    bottom: 0;
    text-align: center;
    right: 0;
    left: 0;
    height: $buttonSize - 4px;
  }

  .dt-palette {
    &.dt-horizontal {
      .dt-btn {
        display: inline-block;
        vertical-align: middle;

        border-top: $border;
        border-bottom: $border;

        &:first-of-type {
          width: $buttonSize + 2;
        }
        &:last-of-type {
          border-right: $border;
          border-radius: 0 $borderRadius $borderRadius 0;
          width: $buttonSize + 2;
        }

        img {
          width: $buttonSize;
          height: $buttonSize;
        }
      }
    }
    &.dt-vertical {
      .dt-btn {
        display: block;
      }
      .dt-text-btn {
        border-bottom: none;

        &:last-of-type {
          border-bottom: $border;
        }
      }
      border-radius: $borderRadius 0 0 $borderRadius;
    }
  }

  .dt-spin {
    -webkit-animation: dt-spin 2s infinite linear;
    animation: dt-spin 2s infinite linear;
  }
}

@-webkit-keyframes dt-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes dt-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
