@import 'ctl_base_ui/colors';
@import 'ctl_base_ui/buttons';
@import 'ctl_base_ui/mixins';

.button-add {
  @extend .button-primary;
  @include border-box;
  border: transparent 1px solid;
  background-color: transparent;
  color: $orange;
  position: relative;
  padding-left: 40px;
  padding-right: 20px;

  &:after {
    position: absolute;
    left: 15px;
    top: 13px;
    content: '';
    @extend .icon-plus;
    @include icon-red;
  }

  &:hover {
    background-color: transparent;
    @include box-shadow(0, 0, 0, 0);
    border: $orange 1px solid;
  }
}

.button-add-positive {
  @extend .button-positive;
  @include border-box;
  position: relative;
  padding-left: 40px;
  padding-right: 20px;
  text-decoration: none;

  &:after {
    position: absolute;
    left: 15px;
    top: 13px;
    content: '';
    @extend .icon-plus;
    @include icon-white;
  }

  &:hover {
    padding-left: 40px;
    padding-right: 20px;
  }
}

.button-minor {
  @include border-radius(0.3em);
  min-width: 80px;
  border: 0;
  padding: 2px 10px;
  background-color: $grey;
  color: $dark_grey;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
  cursor: pointer;


  &:hover {
    background-color: lighten( $dark_grey, 20% );
    @include transition('background-color 0.25s ease');
    color: $white;
  }

  &:focus {
    outline: none;
  }
}
a.button-minor {
  padding-top: 4px;
  padding-bottom: 4px;
}

.button-dark-blue {
  @extend .button-primary;
  @include border-box;
  background-color: $dark_blue;
  color: $white;


  &:hover {
    background-color: darken( $dark_blue, 10% );
    @include transition('background-color 0.25s ease');
    color: $white;
  }

  &:focus {
    outline: none;
  }
}

.button-cancel {
  @extend .button-secondary;
  @include border-box;
}

.compose-dialog-button {
  background: white;
  outline: none;
  border: none;
  display: block;
  color: #777777;
  padding: 10px;
  font-size: 1em;
  line-height: 1.2em;
  position: relative;
  text-decoration: underline;

  &:hover, &:focus {
    text-decoration: none;
    outline: none;
    border: none;
  }
}

button.lorry-export {
  @extend .compose-dialog-button;
  margin-right: 5px;

  &:hover:before {
      background-position: -34px -35px;
  }

  &:before {
    content: '';
    width: 22px;
    height: 21px;
    position: absolute;
    display: block;
    left: -20px;
    top: 8px;
    background-size: 90px 70px;
    background-position: -34px -14px;
    background-image: image-url('icon_lorry.svg');
  }
}

button.clipboard-copy {
  @extend .compose-dialog-button;
  margin-right: 30px;

  &:before, &:after {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    display: block;
    left: -20px;
    top: 8px;
  }

  &:hover:before {
    background: $dark_grey;
  }

  &:before {
    background: $grey;
  }

  &:after {
    top: 12px;
    left: -17px;
    height: 13px;
    width: 13px;
    background-size: 13px 1300px;
    background-position: 0 -130px;
    @extend .icon-checkmark;
    @include icon-white;
  }
  &.copied:before {
    background: $ctl_light_green;
  }
}
