/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

// TO-DO: Change CSS animation to ReactTransitionGroup once
// we upgrade to React 0.13

@keyframes color-picker-enter {
  from {
    opacity: 0;
    transform: translate3d(-20%,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

.ColorPicker__Overlay { background-color: rgba(0,0,0,0); }

.ColorPicker__Title {
  margin: 0 0 $ic-sp; padding: 0;
  line-height: 1.1;
  @include fontSize($ic-font-size--small);
  font-weight: bold;
}

.ColorPicker__Container.with-animation {
  animation-name: color-picker-enter;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

.ColorPicker__Container {
  width: 174px;
  background: $ic-color-light;
  box-sizing: border-box;
  padding: $ic-sp;
  position: relative;
}

.ColorPicker__Container.with-border {
  box-shadow: 0 1px 8px rgba(black, 0.2);
  border-radius: $baseBorderRadius;
  border: 1px solid $ic-border-light;
}

.ColorPicker__Container.with-arrow{
  &:after, &:before {
    #{direction(right)}: 100%; top: $ic-sp*2;
    border: solid transparent;
    content: "";
    height: 0; width: 0;
    position: absolute;
    pointer-events: none;
  }
  &:after {
    border-color: rgba(255,255,255,0);
    border-#{direction(right)}-color: $ic-color-light;
    border-width: $ic-sp - 1;
    margin-top: -($ic-sp - 1);
  }
  &:before {
    border-color: rgba(215, 215, 215, 0);
    border-#{direction(right)}-color: darken($ic-border-light, 4%);
    border-width: $ic-sp;
    margin-top: -($ic-sp);
  }
}

.right > .ColorPicker__Container {
  transform: translate3d(20%,0,0);
  &:after, &:before {
    #{direction(right)}: auto; #{direction(left)}: 100%;
  }
  &:after {
    border-#{direction(right)}-color: rgba(255,255,255,0);
    border-#{direction(left)}-color: $ic-color-light;
  }
  &:before {
    border-#{direction(right)}-color: rgba(255,255,255,0);
    border-#{direction(left)}-color: darken($ic-border-light, 4%);
  }
}

.middle > .ColorPicker__Container {
  &:after, &:before { top: 50%; }
}

.ColorPicker__ColorContainer {
  margin-top: $ic-sp;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ColorPicker__ColorBlock {
  transition: all 0.2s;
  transform: translate3d(0,0,0);
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: direction-sides(0 7px 7px 0);
  padding: 0;
  appearance: none;
  box-shadow: none;
  text-align: center;
  color: $ic-color-light;
  border-radius: $baseBorderRadius;
  border-style: solid;
  border: 2px solid $ic-border-color;

  &:before {
    content: "";
    position: absolute;
    top: -4px;
    #{direction(left)}: -4px;
    #{direction(right)}: -4px;
    bottom: -4px;
    border: 1px solid var(--ic-brand-primary);
    border-radius: 5px;
    transform: scale(0.01);
    transition: all 0.2s;
    opacity: 0;
  }

  &:focus {
    outline: none;
    &:before {
      opacity: 1;
      transform: scale(1);
    }
  }

  &:hover,
  &:focus {
    transform: scale(1.15);
  }

  i[class*=icon-],
  i[class^=icon-] {
    &:before {
      vertical-align: text-bottom;
    }
  }

  // Note that this declaration will have to be changed if
  // the total # colors is changed from the current 15
  &:nth-child(5n) {
    margin-#{direction(right)}: 0;
  }
}

.ColorPicker__ColorBlock-line {
  position: absolute;
  top: 0;
  #{direction(left)}: 0;
  width: 100%;
  height: 100%;
  stroke: red;
  stroke-width: 1;
}

.ColorPicker__ColorBlock.with-dark-check {
  i[class*=icon-], i[class^=icon-] {
    color: $ic-color-dark;
  }
}

.ColorPicker__ColorBlock.with-box-shadow {
  &:hover { box-shadow: 0 1px 2px rgba(black, 0.25); }
  &:focus {
    box-shadow: 0 1px 2px rgba(black, 0.25), inset 0 0 0 1px $ic-color-light;
    @if $use_high_contrast == false { outline: none; }
  }
}

.ColorPicker__CustomInputContainer {
  margin-top: 5px;
  display: flex;
  align-items: center;
}

.ColorPicker__ColorPreview {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-style: solid;
  border-color: $ic-border-color;
  border-radius: $baseBorderRadius;
  border-width: 1px;
  margin-#{direction(right)}: 2px;
  &:focus {
    outline: none;
  }
  i[class*=icon-], i[class^=icon-] {
    margin: 0 auto;
    color: $ic-color-alert;
  }
}

.ColorPicker__Actions {
  margin-top: $ic-sp*.5;
  display: flex;
  justify-content: flex-end;
  body.chrome & {
    // fixes weird Chrome bug, where left border of first button gets cut off
    .Button:first-of-type { margin-#{direction(left)}: 1px; }
  }

}
