// Import from @blackbaud/skyux (using copied file until scss part of npm package)
@import "./skyux/mixins";

// Custom contrib styles
@import "variables";
@mixin sky-button-primary {
  background-color: $sky-color-blue-50;
  background-image: none;
  border: 1px solid rgba(0, 0, 0, 0);
  border-color: $sky-color-blue-50;
  border-radius: 3px;
  color: $sky-color-white;
  cursor: pointer;
  display: inline-block;
  font-family: $sky-font-family;
  font-size: $sky-font-size-md;
  font-weight: normal;
  line-height: 1.42857;
  margin: 0;
  overflow: visible;
  padding: 6px 12px;
  touch-action: manipulation;
  text-align: center;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-appearance: button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  &:hover,
  &:focus,
  &:active {
    background-color: $sky-color-blue-50;
    border-color: $sky-color-blue-70;
    color: $sky-color-white;
    text-decoration: none;
  }

  &[disabled] {
    color: $sky-button-primary-color-disabled;
    pointer-events: none;
    opacity: 0.65;
  }
}

@mixin sky-button-secondary {
  @include sky-button-primary;

  background-color: $sky-color-white;
  border-color: $sky-button-secondary-border;
  color: $sky-color-black;

  &:hover,
  &:focus,
  &:active {
    background-color: $sky-color-white;
    border-color: $sky-button-secondary-border-active;
    color: $sky-color-black;
    text-decoration: none;
  }
}

@mixin sky-button-link {
  @include sky-button-primary;

  background-color: transparent;
  border-color: transparent;
  color: $sky-button-link-color;
  padding: 0;

  &:hover,
  &:focus,
  &:active {
    background-color: transparent;
    border-color: transparent;
    color: $sky-button-link-color-active;
    text-decoration: underline;
  }
}

@mixin sky-search-bar {
  display: flex;
  position: relative;
  margin: 0;
  padding: 0;

  input {
    font-size: $sky-font-size-md;
    float: left;
    height: 26px;
    width: 100%;
    border: 1px solid $sky-border-color-neutral-light;
    outline: none;
    -webkit-appearance: none;

    &:focus {
      box-shadow: 3px 0 8px 0 $sky-search-bar-outline-color;
      border: 1px solid $sky-color-blue-50;
      border-right: none;
    }

    &[type='text'] {
      padding-left: 5px;
      padding-right: 30px;
    }

    &::-webkit-input-placeholder {
        font-style: italic;
    }
    &:-moz-placeholder {
        font-style: italic;
    }
    &::-moz-placeholder {
        font-style: italic;
    }
    &:-ms-input-placeholder {
        font-style: italic;
    }
  }

  button {
    @include sky-button-link;

    color: $sky-text-color-default;
    height: 30px;
    margin: 0 10px 0 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 30px;
  }
}