Update tabs styles

src/components/hy-tabs/hy-tabs.scss

@@ -9,10 +9,10 @@
   }
 
   .hy-tab-scroll {
-    background-color: var(--brand-main-light);
-    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.8);
     border: 0;
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+    height: 100%;
+    margin: 0;
     padding: 0;
     position: absolute;
     top: 50%;
@@ -23,6 +23,7 @@
       display: none;
       visibility: hidden;
     }
+
     &.is-disabled {
       background-color: var(--grayscale-medium);
 
@@ -37,39 +38,37 @@
       cursor: pointer;
     }
 
-    svg {
-      fill: var(--grayscale-white);
-      height: 16px;
-      margin: 8px;
-      position: relative;
-      width: 16px;
-
-      @include breakpoint($narrow) {
-        height: 18px;
-        margin: 9px; //36x36
-        width: 18px;
-      }
+    span {
+      align-items: center;
+      background-color: var(--grayscale-black);
+      border-radius: 100%;
+      display: inline-flex;
+      height: 32px;
+      justify-content: center;
+      width: 32px;
 
-      @include breakpoint($wide) {
-        height: 24px;
-        margin: 10px; //44x44
-        width: 24px;
+      svg {
+        fill: var(--grayscale-white);
+        height: 16px;
+        width: 16px;
       }
     }
 
     &__left {
-      left: 2px;
+      left: 0;
+      padding-right: 8px;
 
       svg {
-        left: -1.5px;
+        transform: translateX(-1px);
       }
     }
 
     &__right {
-      right: 2px;
+      padding-left: 8px;
+      right: 0;
 
       svg {
-        left: 1.5px;
+        transform: translateX(1px);
       }
     }
   }
@@ -88,62 +87,73 @@
   }
 
   [role='tab'] {
-    @include font-size(14px, 16px);
-
-    align-items: center;
-    background-color: var(--grayscale-background-box);
+    align-items: stretch;
+    background-color: transparent;
     border: 0;
-    color: var(--grayscale-black);
     display: flex;
     flex-direction: row;
     flex-shrink: 0;
-    font-family: var(--main-font-family);
-    font-weight: 600;
-    hyphens: auto;
     justify-content: center;
-    letter-spacing: -0.44px;
-    margin: 0 4px 0 0;
-    max-width: calc(100% / 12 * 3);
-    min-height: 44px;
-    min-width: 100px;
-    padding: 8px;
-    position: relative;
-    white-space: normal;
-    word-break: break-word;
+    margin-bottom: 6px;
+    max-width: 47.56%;
+    padding: 0;
 
-    @supports (overflow-wrap: anywhere) {
-      overflow-wrap: anywhere;
+    &:not(:first-of-type) {
+      margin-left: 6px;
     }
 
-    overflow-wrap: break-word;
-
-    @supports (overflow-wrap: anywhere) {
-      overflow-wrap: anywhere;
+    @include breakpoint($narrow) {
+      max-width: 35.37%;
     }
 
-    overflow-wrap: break-word;
+    @include breakpoint($wide) {
+      max-width: 23.13%;
+    }
 
-    span.tab-title {
-      padding: 8px;
+    @include breakpoint($extrawide) {
+      max-width: 23.03%;
     }
 
-    @include breakpoint($narrow) {
-      @include font-size(18px, 24px);
-      letter-spacing: -0.56px;
-      margin: 0 8px 0 0;
-      padding: 8px 12px;
+    > span {
+      @include font-size(14px, 14px);
+      @include font-weight($bold);
+      align-items: center;
+      background-color: var(--grayscale-background-box);
+      border: 0;
+      color: var(--link-blue);
+      display: flex;
+      font-family: var(--main-font-family);
+      hyphens: auto;
+      letter-spacing: -0.5px;
+      padding: 8px 8px 7px;
+      pointer-events: none;
+      position: relative;
+      text-align: left;
+      white-space: normal;
+      word-break: break-word;
 
-      span.tab-title {
-        padding: 8px 12px;
+      @include breakpoint($narrow) {
+        @include font-size(16px, 18px);
+        padding: 16px 12px 10px;
       }
-    }
 
-    @include breakpoint($wide) {
-      padding: 8px 16px;
+      @include breakpoint($extrawide) {
+        @include font-size(18px, 20px);
+        letter-spacing: -0.6px;
+        padding: 16px 16px 14px;
+      }
 
-      span.tab-title {
-        padding: 8px 16px;
+      @supports (overflow-wrap: anywhere) {
+        overflow-wrap: anywhere;
       }
+
+      overflow-wrap: break-word;
+
+      @supports (overflow-wrap: anywhere) {
+        overflow-wrap: anywhere;
+      }
+
+      overflow-wrap: break-word;
     }
   }
 
@@ -155,15 +165,45 @@
   }
 
   [role='tab'][aria-selected='true'] {
-    background: var(--grayscale-white);
-    border: 1px solid var(--grayscale-tabs-border);
     border-bottom-width: 0;
-    box-shadow: inset 0 1px 0 0 #d2d2d2, inset -1px 1px 0 0 #d2d2d2, inset 1px 1px 0 0 #d2d2d2,
-      0 -4px 8px -4px rgba(0, 0, 0, 0.1);
-    font-weight: bold;
-    margin-bottom: -1px;
-    padding-bottom: 9px;
+    border: 1px solid var(--grayscale-dark);
+    margin-bottom: 0;
     z-index: 3;
+
+    > span {
+      background-color: var(--grayscale-white);
+      color: var(--grayscale-black);
+      padding-bottom: 13px;
+
+      @include breakpoint($narrow) {
+        padding-bottom: 16px;
+      }
+
+      @include breakpoint($extrawide) {
+        padding-bottom: 20px;
+      }
+
+      &:before {
+        background-color: var(--grayscale-white);
+        bottom: 0;
+        content: '';
+        height: 4px;
+        left: 0;
+        position: absolute;
+        right: 0;
+        transform: translateY(50%);
+      }
+
+      &:after {
+        background-color: var(--grayscale-black);
+        bottom: 0;
+        content: '';
+        height: 4px;
+        left: 8px;
+        position: absolute;
+        right: 8px;
+      }
+    }
   }
 
   [role='tab']:hover,
@@ -173,17 +213,26 @@
     color: inherit;
     cursor: pointer;
     text-decoration: none;
-  }
 
-  [role='tab']:hover::before,
-  [role='tab']:focus::before {
+    span {
+      background-color: var(--hover-gray);
+      color: var(--brand-main-active);
+    }
   }
 
   [role='tabpanel'] {
-    border-top: 1px solid var(--grayscale-medium);
-    padding: 1.5em 0.5em 0.7em;
+    border: 1px solid var(--grayscale-dark);
+    padding: 28px 12px;
     position: relative;
     z-index: 2;
+
+    @include breakpoint($narrow) {
+      padding: 38px 15px;
+    }
+
+    @include breakpoint($wide) {
+      padding: 40px 20px;
+    }
   }
 
   [role='tabpanel']:focus {

src/components/hy-tabs/hy-tabs.tsx

@@ -321,7 +321,9 @@ export class HyTabs implements ComponentInterface {
       <div id={id} class={classComponentAttributes}>
         <div class="hy-tablist-container">
           <button tabindex="-1" class="hy-tab-scroll hy-tab-scroll__left is-hidden" aria-hidden="true">
-            <hy-icon icon={'hy-icon-caret-left'} size={16} />
+            <span>
+              <hy-icon icon={'hy-icon-caret-left'} size={16} />
+            </span>
           </button>
           <div role="tablist" aria-label={this.tabListLabel}>
             {this.tabButtonTitles &&
@@ -329,19 +331,16 @@ export class HyTabs implements ComponentInterface {
                 const title = Object.values(item)[0];
                 const id = title.toLowerCase().replace(/\W/g, '-');
                 return (
-                  <button
-                    aria-selected="false"
-                    aria-controls={`${id}-tab`}
-                    class={this.headerstyle}
-                    role="tab"
-                    id={id}
-                    innerHTML={title}
-                  ></button>
+                  <button aria-selected="false" aria-controls={`${id}-tab`} class={this.headerstyle} role="tab" id={id}>
+                    <span>{title}</span>
+                  </button>
                 );
               })}
           </div>
           <button tabindex="-1" class="hy-tab-scroll hy-tab-scroll__right" aria-hidden="true">
-            <hy-icon icon={'hy-icon-caret-right'} size={16} />
+            <span>
+              <hy-icon icon={'hy-icon-caret-right'} size={16} />
+            </span>
           </button>
         </div>
         <slot></slot>