WebJamApps/breakpointministries

@mixin buttonDefault {
  border: 1px solid $color-black;

  font-size: 1.44rem;
  font-weight: $font-weight-med;

  border-radius: .3rem;
  height: 3.3rem;
  color: $color-black;
  background-color: rgba($logo-blue, .3);
  padding: .3rem 0;
  backface-visibility: hidden;
  transition: all .2s;

  @media only screen and (min-width: $bp-4k) {
    height: 5.3rem;
    width: 11rem !important;
    font-size: 3rem;
  }

  &:link, &:visited {
    text-transform: uppercase;
    text-decoration: none;
    font-size: $default-font-size;
    padding: 1rem 2rem;
    display: inline-block;
    border-radius: 1rem;
    transition: all .2s;
    position: relative;
  }

  &:hover {
    transform: translateY(-3px);
    box-shadow: $box-shadow-2;

    &::after {
      transform: scaleX(1.4) scaleY(1.6);
      opacity: 0;
    }
  }

  &:active {
    transform: translateY(-1px);
    box-shadow: $box-shadow-3;
  }

  &:disabled {
    background-color: rgba($color-grey-light-1, .2);
    color: rgba($color-black, .6);
    border: .1rem solid rgba($logo-red, 1);

    &:hover {
    transform: translateY(0);
    box-shadow: none;
    }
  }
}

@mixin scrollbarOverride {
  scrollbar-width: thin;
  scrollbar-color: $logo-blue-dark $color-grey-light-1;

  &::-webkit-scrollbar {
    width: 1.1rem;
  }

  &::-webkit-scrollbar-track {
    background: $color-grey-light-1;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $logo-blue-dark;
    border-radius: .6rem;
    border: .1rem solid $color-grey-light-1;
  }
}

@mixin socialMedia {
  & i {
    font-size: 2.2rem;
    color: $logo-blue-dark;
    transition: all .3s;

    @media only screen and (min-width: $bp-4k) {
      font-size: 4.2rem;
      margin-right: 1rem;
    }

    &:hover {
      color: rgba($logo-blue-dark, .85);
    }
  }

  li {
    &:not(:last-child) {
    margin-right: .5rem; }
  }

  &--link {
    text-decoration: none;
    font-size: 1.8rem;
  }
}