/**
 * Variables
 */

.radio {
    ////
    /// The background of the radio component indicator
    /// @name background
    /// @type color
    ////
    ----background: #{color('white')};
    ////
    /// The background of the radio component indicator when checked
    /// @name background--checked
    /// @type color
    ////
    ----background--checked: #{color('primary')};
    ////
    /// The background of the radio component indicator when disabled
    /// @name background--disabled
    /// @type color
    ////
    ----background--disabled: #{color('light-25')};
    ////
    /// The background of the radio component indicator when checked and disabled
    /// @name background--checked-disabled
    /// @type color
    ////
    ----background--checked-disabled: #{color('primary-25')};
    ////
    /// The border-color of the radio component indicator
    /// @name border-color
    /// @type color
    ////
    ----border-color: #{color('light-55')};
    ////
    /// The border-color of the radio component indicator when checked
    /// @name border-color--checked
    /// @type color
    ////
    ----border-color--checked: #{color('primary-55')};
    ////
    /// The border-color of the radio component indicator when disabled
    /// @name border-color--disabled
    /// @type color
    ////
    ----border-color--disabled: #{color('light')};
    ////
    /// The border-color of the radio component indicator when checked and disabled
    /// @name border-color--checked-disabled
    /// @type color
    ////
    ----border-color--checked-disabled: #{color('primary-30')};
    ////
    /// The border style of the radio component indicator
    /// @name border-style
    ////
    ----border-style: #{var(--border-style)};
    ////
    /// The border top width of the radio component indicator
    /// @name border-top-width
    ////
    ----border-top-width: #{var(--border-top-width)};
    ////
    /// The border right width of the radio component indicator
    /// @name border-right-width
    ////
    ----border-right-width: #{var(--border-right-width)};
    ////
    /// The border bottom width of the radio component indicator
    /// @name border-bottom-width
    ////
    ----border-bottom-width: #{var(--border-bottom-width)};
    ////
    /// The border left width of the radio component indicator
    /// @name border-left-width
    ////
    ----border-left-width: #{var(--border-left-width)};
    ////
    /// The border width of the radio component indicator
    /// @name border-width
    ////
    ----border-width: #{var(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)};
    ////
    /// The border top left radius of the radio component indicator
    /// @name border-top-left-radius
    ////
    ----border-top-left-radius: #{50%};
    ////
    /// The border top right radius of the radio component indicator
    /// @name border-top-right-radius
    ////
    ----border-top-right-radius: #{50%};
    ////
    /// The border bottom right radius of the radio component indicator
    /// @name border-bottom-right-radius
    ////
    ----border-bottom-right-radius: #{50%};
    ////
    /// The border bottom left radius of the radio component indicator
    /// @name border-bottom-left-radius
    ////
    ----border-bottom-left-radius: #{50%};
    ////
    /// The border radius of the radio component indicator
    /// @name border-radius
    ////
    ----border-radius: #{var(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)};
    ////
    /// The box shadow horizontal offset of the radio component indicator
    /// @name box-shadow-offset-x
    ////
    ----box-shadow-offset-x: #{var(--box-shadow-offset-x)};
    ////
    /// The box shadow vertical offset of the radio component indicator
    /// @name box-shadow-offset-y
    ////
    ----box-shadow-offset-y: #{var(--box-shadow-offset-y)};
    ////
    /// The box shadow blur radius of the radio component indicator
    /// @name box-shadow-blur-radius
    ////
    ----box-shadow-blur-radius: #{var(--box-shadow-blur-radius)};
    ////
    /// The box shadow spread radius of the radio component indicator
    /// @name box-shadow-spread-radius
    ////
    ----box-shadow-spread-radius: #{var(--box-shadow-spread-radius)};
    ////
    /// The box shadow spread radius of the radio component indicator
    /// @name box-shadow-color
    ////
    ----box-shadow-color: #{var(--box-shadow-color)};
    ////
    /// The box shadow of the radio component indicator
    /// @name box-shadow
    ////
    ----box-shadow: #{var(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)};
    ////
    /// The color of the radio component indicator icon
    /// @name color
    /// @type color
    ////
    ----color: #{color('white')};
    ////
    /// The color of the radio component indicator icon when disabled
    /// @name color--disabled
    /// @type color
    ////
    ----color--disabled: #{color('light-25')};
    ////
    /// The right margin of the radio component indicator
    /// @name margin-right
    ////
    ----margin-right: #{calc(var(--margin-right) / 2)};
    ////
    /// The size of the radio component indicator
    /// @name size
    /// @type size
    ////
    ----size: #{1rem};
    ////
    /// The size of the radio component indicator check mark icon
    /// @name checkmark--size
    /// @type size
    ////
    ----checkmark--size: #{8px};
    ////
    /// The font size of the radio component label
    /// @name label--font-size
    /// @type size
    ////
    ----label--font-size: #{font-size()};
    ////
    /// The label color of the radio component label
    /// @name label--color
    /// @type color
    ////
    ----label--color: #{contrast-color($color-light)};
    ////
    /// The label color of the radio component when disabled
    /// @name label--color--disabled
    /// @type color
    ////
    ----label--color--disabled: #{color('light-70')};
}