@keyframes cd-icon-loading {
  0% {
    transform: rotate(-40deg);
  }
  50% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(-5deg);
  }
  90% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-40deg);
  }
}

.cd-editor-action-button {
  color: $dark-gray;
  background: $light-gray;
  border: 1px solid $medium-gray;
  font-size: $font-medium;
  outline: none;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  min-width: 3em;
  padding: 0;

  &:hover {
    color: #222;
    background: linear-gradient(to bottom, #f4f4f4 0%, #dbdbdb 100%);
  }

  &.right {
    float: right;
  }

  &.left {
    float: left;
  }

  &.large {
    font-size: $font-large;
  }

  &.cd-editor-action-button-disabled {
    background: darken($light-gray, 8%);
    color: lighten($dark-gray, 8%);
    cursor: not-allowed;
  }

  &.cd-editor-action-button-delete {
    background: $color-error;
    color: mix($color-error, #fff, 50%);
    border-color: darken($color-error, 10%);

    &:hover {
      background: linear-gradient(to bottom, $color-error 0%, darken($color-error, 10%) 100%);
      color: #fff;
    }
  }

  &.cd-editor-action-button-primary {
    background: $primary-color;
    color: mix($primary-color, #fff, 15%);
    border-color: darken($primary-color, 10%);

    &:not(.cd-editor-action-button-disabled):hover {
      background: linear-gradient(to bottom, $primary-color 0%, darken($primary-color, 10%) 100%);
      color: #fff;
    }

    &.cd-editor-action-button-disabled {
      color: mix($primary-color, #fff, 50%);
      cursor: not-allowed;
    }
  }

  .cd-editor-action-button-icon {
    height: auto;
    width: auto;
    vertical-align: middle;
    margin-right: 0.5em;
    display: none;
  }

  .cd-editor-action-button-text {
    vertical-align: middle;
  }
}

.cd-editor-sub-action {
  line-height: 50px;
  color: $dark-gray;
  text-decoration: none;

  &:hover {
    color: inherit;
  }

  &.delete {
    color: mix($color-error, #fff, 60%);

    &:hover {
      color: $color-error;
    }
  }
}

.cd-customize-show {
  position: absolute;
  bottom: 1em;
  left: 1em;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  z-index: 100;
  transition: transform 150ms;

  &:hover {
    transform: translateY(-5px);
  }

  .cd-customize-show-icon {
    font-size: 4em;
    color: #fff;
    text-shadow: 0 0 10px rgba(#000, 0.5);
    animation-name: highlight-opacity;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

.cd-editor-tip {
  position: absolute;
  background: $primary-color;
  color: #fff;
  padding: 0.5em;
  box-shadow: 2px 2px 10px rgba(#000, 0.4);
  animation-duration: 1s;
  animation-iteration-count: infinite;

  &:after {
    content: '';
    position: absolute;
    top: 100%;
    width: 0;
    height: 0;
    border-style: solid;
  }

  &.cd-editor-tip-above {
    bottom: calc(100% + 7px);
    animation-name: bounce-down;

    &:after {
      top: 100%;
      left: 50%;
      margin-left: -7.5px;
      border-width: 10px 7.5px 0 7.5px;
      border-color: $primary-color transparent transparent transparent;
    }
  }

  &.cd-editor-tip-below {
    top: calc(100% + 7px);
    animation-name: bounce-up;

    &:after {
      bottom: 100%;
      left: 50%;
      margin-left: -7.5px;
      border-width: 0 7.5px 10px 7.5px;
      border-color: transparent transparent $primary-color transparent;
    }
  }

  &.cd-editor-tip-right {
    left: calc(100% + 7px);
    animation-name: bounce-left;

    &:after {
      right: 100%;
      top: 50%;
      margin-top: -7.5px;
      border-width: 7.5px 10px 7.5px 0;
      border-color: transparent $primary-color transparent transparent;
    }
  }

  &.cd-editor-tip-left {
    right: calc(100% + 7px);
    animation-name: bounce-right;

    &:after {
      left: 100%;
      top: 50%;
      margin-top: -7.5px;
      border-width: 7.5px 0 7.5px 10px;
      border-color: transparent transparent transparent $primary-color;
    }
  }
}

.cd-editor-hide {
  position: fixed;
  left: 10px;
  bottom: 0;
  line-height: 50px;
  height: 50px;
  font-size: 28px;
  z-index: 20;

  &.hidden {
    a {
      color: #fff;
    }
  }

  a {
    color: $dark-gray;

    &:hover {
      color: $primary-color;
    }
  }
}

.cd-loading-icon {
  fill: $dark-gray;
  width: 100px;
  max-width: 100%;

  .cd-loading-icon-arrow {
    transform-origin: 40% 100%;
    animation: cd-icon-loading infinite 1s;
    animation-timing-function: ease-in;
  }
}