@layer components {
  /*
   * Set navbar
   */
  
  .set-navbar {
    background-color: var(--color-white);
    bottom: 0;
    box-shadow: 0px 0px 0px 1px rgb(var(--rgb-grey-900) / 0.16);
    left: 0;
    padding: 1.25rem 0;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 10;
  
    @media (max-width: 1199.98px) {
      padding: 1rem 0;
    }
  
    @media (max-width: 991.98px) {
      padding: 0.75rem 0;
    }
  
    @media (max-width: 639.98px) {
      padding: 0.5rem 0;
    }
  
    .set-navbar-content {
      align-items: center;
    }
  
    .set-navbar-center {
      text-align: center;
  
      @media (max-width: 639.98px) {
        padding: 0.5rem 0;
      }
    }
  
    .set-navbar-right {
      text-align: right;
  
      .btn:last-of-type {
        margin-left: 0.188rem;
      }
    }
  
    .btn {
      @media (max-width: 639.98px) {
        padding: 0.5rem 1rem;
      }
    }
  
    .btn-text {
      @media (max-width: 639.98px) {
        display: none;
      }
    }
  
    .btn-icon {
      display: none;
  
      @media (max-width: 639.98px) {
        display: inline;
      }
    }
  
    .btn-disabled {
      .btn-icon {
        color: var(--color-white);
      }
    }
  
    .set-navbar-no {
      @media (max-width: 639.98px) {
        font-size: 0.875rem;
      }
    }
  }
}