:root {
  /* ---------------------------------- *\
           Tabs style
  \* ---------------------------------- */

  // Tabs style
  --lf-tabs-background: var(--lf-color-gray-50);
  --lf-tabs-radius: #{rem(8)};
  --lf-tabs-spacing: #{rem(12)};
  --lf-tabs-padding: #{rem(4)};

  // Tab style
  --lf-tab-font-weight: 600;
  --lf-tab-text: var(--lf-color-gray-500);
  --lf-tab-radius: #{rem(6)};

  // Hover
  --lf-tab-hover-background: var(--lf-color-gray-100);

  // Active
  --lf-tab-active-background: var(--lf-color-primary-50);
  --lf-tab-active-text: var(--lf-color-gray-900);
  --lf-tab-active-shadow: var(--shadow-m);

  /* ---------------------------------- *\
           Tab sizes
  \* ---------------------------------- */

  /* Small */
  --lf-tabs-small-font-size: #{rem(13)};
  --lf-tabs-small-line-height: #{rem(24)};
  --lf-tabs-small-padding: #{rem(2)} #{rem(8)};

  /* Medium */
  --lf-tabs-medium-font-size: #{rem(14)};
  --lf-tabs-medium-line-height: #{rem(24)};
  --lf-tabs-medium-padding: #{rem(4)} #{rem(12)};
}
