// Button style

@mixin btn-coloring-base($color, $colorHover) {
  background-color: $color;
  border-color: $color;

  &:hover,
  &:visited {
    background-color: $colorHover;
    border-color: $colorHover;
  }

  &:disabled {
    background-color: $color;
    border-color: $color;
  }
}

%icon-general-style {
  content: '';
  height: 1.2em;
  width: 1.5em;
  display: inline-block;
}

%table-info-icon-for-popup {
  height: 1.2em;
  width: 1.2em;
  border: solid 0.8px $white;
  filter: grayscale(1) brightness(88%) contrast(2);
  &:focus,
  &:hover {
    border: solid 0.8px $white;
    outline: 0;
    filter: grayscale(1) brightness(90%) contrast(2);
  }
}

.btn-primary {
  min-height: 2.75rem;

  &.next {
    &::after {
      content: '';
      background: $data-arrow-next-white-svg no-repeat 0.3rem 0;
      background-size: 0.875rem 0.875rem;
      vertical-align: middle;
      width: 1.25rem;
      height: 1.25rem;
      display: inherit;
      position: relative;
      top: 2px;
      left: 2px;
    }
  }
}

.btn-success {
  min-height: 2.75rem;

  &.next {
    &::after {
      content: '';
      background: $data-arrow-next-white-svg no-repeat 0.3rem 0;
      background-size: 0.875rem 0.875rem;
      vertical-align: middle;
      width: 1.25rem;
      height: 1.25rem;
      display: inherit;
      position: relative;
      top: 2px;
      left: 2px;
    }
  }

  &.back {
    &::before {
      @extend %icon-general-style;
      background: $data-arrow-back-black-svg no-repeat;
      background-size: 0.875rem 0.875rem;
      color: $linkBlue;
      vertical-align: middle;
      margin-top: 0.25rem;
      filter: brightness(0) invert(1);
    }
  }
}

.btn-secondary {
  @include btn-coloring-base($white, $lightGrey);
  color: $black;
  border-color: $grey;
  min-height: 2.75rem;

  &:hover,
  &:visited,
  &:disabled {
    border-color: $grey;
    color: $black;
  }

  &.next {
    &::after {
      content: '';
      background: $data-arrow-next-black-svg no-repeat 0.3rem 0;
      background-size: 0.875rem 0.875rem;
      vertical-align: middle;
      width: 1.25rem;
      height: 1.25rem;
      display: inherit;
      position: relative;
      top: 1px;
      left: 2px;
    }
  }

  &.back {
    &::before {
      @extend %icon-general-style;
      background: $data-arrow-back-black-svg no-repeat 0 0rem;
      background-size: 0.875rem 0.875rem;
      color: $linkBlue;
      vertical-align: middle;
      margin-top: 0.188rem;
      filter: grayscale(0.9) brightness(0.5);
    }
  }
}

.btn-success {
  @include btn-coloring-base($green, $greenHover);
  min-height: 2.75rem;
}

.btn-danger {
  @include btn-coloring-base($red, $redHover);
  min-height: 2.75rem;
}

.btn-link {
  border: 0;
  height: 2.75rem;
  padding: 0 1rem;
}

.external-link::after {
  @extend %icon-general-style;
  height: 1.25rem;
  width: 1.3rem;
  background: $data-open-window-blue-svg no-repeat;
  background-size: 1.25rem 1.25rem;
  margin: 0 0 -4px 10px;
}

.link-back {
  &::before {
    @extend %icon-general-style;
    background: $data-arrow-back-blue-svg no-repeat;
    background-size: 0.875rem 0.875rem;
    background-position-x: center;
    vertical-align: middle;
    margin: 0.125rem 0.625rem 0 0;
    width: 1rem;
  }
}

.pdf-link {
  margin: 0;
  @media (min-width: 768px) {
    margin: 0 1.5em 0 1em;
  }
  &:before {
    @extend %icon-general-style;
    background: $data-pdf-blue-svg no-repeat;
    height: 1.25rem;
    margin: 0 0.625rem 0.3rem 0;
    width: 1rem;
    vertical-align: middle;
  }
}

.pdf-post-link {
  margin: 0;

  &:after {
    @extend %icon-general-style;
    background: $data-pdf-blue-svg no-repeat;
    height: 1.25rem;
    width: 1rem;
    margin: 0 0 0.3rem 0.625em;
    vertical-align: middle;
  }
}

.btn-info-modal {
  //change secondary to primary
  background: $data-open-modal-blue-svg no-repeat;
  background-color: transparent;
  background-size: contain;
  border: transparent;
  border-radius: 0.8em;
  margin-left: 1em;
  width: 1.3em;
  height: 1.3em;
  padding: 0;
  vertical-align: baseline;
}

th > button.btn-info-modal,
td > button.btn-info-modal,
td > span > button.btn-info-modal {
  @extend %table-info-icon-for-popup;
  margin-left: 0;
  vertical-align: middle;
}

.btn-upload-file {
  //FileInput in kth-style-react-components
  display: flex;
  flex-direction: column;
  input[type='file'] {
    filter: alpha(opacity=0);
    opacity: 0;
    border: 0;
  }
  span {
    margin: 0;
    &::after {
      @extend %icon-general-style;
      vertical-align: bottom;
      background: $data-upload-blue-svg no-repeat;
      background-size: 1em;
      float: right;
    }
  }
}