/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not
|* distributed with this file, you can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../../../styling/defs.scss' as bk;

@layer baklava.components {
  .bk-progress-bar {
    @include bk.component-base(bk-progress-bar);
    
    appearance: none; // Unset default browser appearance
    display: block;
    
    block-size: bk.rem-from-px(10); // Note: no matching sizing token
    inline-size: 100%; // Note: necessary in Firefox despite the `display: block` for some reason
    background: bk.$theme-progress-bar-track;
    border: none;
    border-radius: bk.$border-radius-cap;
    
    // The `<progress>` element can currently only be styled through vendor-specific prefixes
    &::-moz-progress-bar {
      background: bk.$theme-progress-bar-fill;
      border-radius: bk.$border-radius-cap;
    }
    &::-webkit-progress-bar {
      background: bk.$theme-progress-bar-track;
      border-radius: bk.$border-radius-cap;
    }
    &::-webkit-progress-value {
      background: bk.$theme-progress-bar-fill;
      border-radius: bk.$border-radius-cap;
    }
  }
  
  .bk-progress-bar__label {
    font-size: bk.$font-size-m;
    font-weight: bk.$font-weight-semibold;
    margin-block-end: bk.$spacing-3;
  }
  
  .bk-progress-bar__hint-text {
    font-size: bk.$font-size-s;
    margin-block-start: 0.1lh;
  }
}
