Applying animation CSS I already have to new plugin

Site URL: https://gregorylassale.com

I just switched to a new accordion-tabs plugin. The one that I used before that has this animation on hover I really like:

 I think the CSS for that animation is 

.box-sizing (@type: border-box) {
  -webkit-box-sizing: @type;
  -moz-box-sizing:    @type;
  box-sizing:         @type;
}

.transition (@transition) {
  -webkit-transition: @transition;
  -moz-transition:    @transition;
  -ms-transition:     @transition;
  -o-transition:      @transition;
  transition:         @transition;
}

// Overrides (modify at your own risk)
// No support provided past this point
// -----------------------------------
.accordion-2 {
  list-style: none;
  padding: 0;

  &__item {
    margin-bottom: 10px;
  }
  
  &__title {
    .background-checker(@accordion-2__primary-color);
    .box-sizing;
    .transition(all .3s ease);
    border-left: 3px solid @accordion-2__primary-color;

I'd like to apply it to my plugin but would need help with that.

The new plugin's customization CSS is

/* Plugin Accotabs - Custom Styles */
html .c-tabs__accordion-tab {
  margin: 0 0 10px;
  background: #f3f5f7;
  border: .5px solid #ddd;
  border-radius: 3px 3px 3px 3px;
}

html .c-tabs.has-hover .c-tabs__accordion-tab:hover,html .c-tabs__accordion-tab[aria-expanded=true] {
  background: #e8ecf0;
  border: .5px solid #ddd;
}
/* end Plugin Accotabs - Custom Styles */

Thanks in advance. 

5 hours ago, GregLassale said:

Site URL: https://gregorylassale.com

I just switched to a new accordion-tabs plugin. The one that I used before that has this animation on hover I really like:

 

 I think the CSS for that animation is 

.box-sizing (@type: border-box) {
  -webkit-box-sizing: @type;
  -moz-box-sizing:    @type;
  box-sizing:         @type;
}

.transition (@transition) {
  -webkit-transition: @transition;
  -moz-transition:    @transition;
  -ms-transition:     @transition;
  -o-transition:      @transition;
  transition:         @transition;
}

// Overrides (modify at your own risk)
// No support provided past this point
// -----------------------------------
.accordion-2 {
  list-style: none;
  padding: 0;

  &__item {
    margin-bottom: 10px;
  }
  
  &__title {
    .background-checker(@accordion-2__primary-color);
    .box-sizing;
    .transition(all .3s ease);
    border-left: 3px solid @accordion-2__primary-color;

I'd like to apply it to my plugin but would need help with that.

The new plugin's customization CSS is

/* Plugin Accotabs - Custom Styles */
html .c-tabs__accordion-tab {
  margin: 0 0 10px;
  background: #f3f5f7;
  border: .5px solid #ddd;
  border-radius: 3px 3px 3px 3px;
}

html .c-tabs.has-hover .c-tabs__accordion-tab:hover,html .c-tabs__accordion-tab[aria-expanded=true] {
  background: #e8ecf0;
  border: .5px solid #ddd;
}
/* end Plugin Accotabs - Custom Styles */

 

Thanks in advance. 

try if this helps

html .c-tabs__accordion-tab:hover {
  border-left: 2px solid #000 !important;
}

6 hours ago, bangank36 said:

try if this helps

html .c-tabs__accordion-tab:hover {
  border-left: 2px solid #000 !important;
}

 

Worked perfect. Thank you @bangank36.

CSS is funny. Every time I think something should be easy to do, it's more involved, and every time I think it's gonna be more involved, it's easy. 🙃