/**
 *
 * @ai-apps/angular v2.152.0 | _custom-property.scss
 *
 * Copyright 2014, 2023 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


//
// Copyright IBM Corp. 2018, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use '../config';

// Some CSS Custom Property terminology
// @see https://www.w3.org/TR/css-variables-1/
//
// <custom-property-name>:
//   Any valid identifer that starts with two dashes (--)
//
// A declaration:
//   CSS Custom Properties can be used as declarations in a CSS selector. They
//   take on the form of:
//
//   <custom-property-name>: <declaration-value>;
//
// The var() notation:
//   You can use a CSS Custom Property as a substitute for a value of another
//   property using the var() function. This function has the following syntax:
//
//   var( <custom-property-name> [, <declarative-value> ]? )
//
//   This function takes in an optional fallback value if the CSS Custom
//   Property has not been previously defined

/// Get the <custom-property-name> for a given string
/// @param {String} $name
/// @returns {String}
@function get-name($name) {
  @return --#{config.$prefix}-#{$name};
}

/// Get the var() representation for a given token
/// @param {String} $name
/// @param {Any} $fallback
/// @returns var()
@function get-var($name, $fallback: false) {
  @if $fallback {
    @return var(--#{config.$prefix}-#{$name}, #{$fallback});
  }
  @return var(--#{config.$prefix}-#{$name});
}

/// Emit a declaration which sets the value of a CSS Custom Property using the
/// $name as the <custom-property-name> and the $value as the
/// <declaration-value>
/// @param {String} $name
/// @param {any} $value
@mixin declaration($name, $value) {
  #{get-name($name)}: #{$value};
}
