@mixin common-styles() {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 700;
        color: $primary-color;
        font-family: $secondary-font-family;
    }
    a {
        color: $body-font-color;
        font-weight: bold;
        text-underline-position: under;
        border-bottom: 1px solid $link-color;
        &:focus,
        &:hover,
        &:active,
        &.active {
            border-bottom: 1px solid $link-color;
            text-decoration: none;
        }
    }
    .unicorn-content {
        color: $body-font-color;
    }
    .switch {
        &-slider {
            background-color: #ccc;
        }
        &-slider:before {
            background-color: white;
        }
    
        input:checked + &-slider {
            background-color: $primary-color;
        }
    
        input:focus + &-slider {
            box-shadow: 0 0 1px $primary-color;
        }
    }
    
    
    .btn {
        min-height: 44px;
        height: auto;
        &.btn-primary {
            background: $primary-color;
            border-color: $primary-color-dark;
            color: $light-color;
        }
        &.btn-secondary {
            background: $secondary-color;
            border-color: $secondary-color-dark;
            color: $light-color;
        }
        &.btn-underline {
            font-size: 16px;
            color: $body-font-color;
            background: transparent;
            font-family: $body-font-family;
            text-decoration: underline;
            font-weight: normal;
            text-transform: capitalize;
            &:focus,
            &:hover,
            &:active,
            &.active {
              background: transparent;
              color: $body-font-color;
            }
          }
        &.btn-link {
            font-family: $secondary-font-family;
            color: $body-font-color;
            font-weight: normal;
            background: transparent;
            border:  0;
            box-shadow: none;
            &.btn-arrow {
                &::before{
                    content: "< ";
                    vertical-align: text-bottom;
                }
            }
            &:focus,
            &:hover,
            &:active,
            &.active {
              background: transparent;
              color: $body-font-color;
            }
          }
    }
}