@import "../../themes/native/native.globals.md";

// Material Design Item
// --------------------------------------------------

/// @prop - Minimum height of the item
$item-md-min-height: 48px;

/// @prop - Color of the item paragraph
$item-md-paragraph-text-color: $text-color-step-400;

/// @prop - Font size of the item
$item-md-font-size: 16px;

/// @prop - Width of the avatar in the item
$item-md-avatar-width: 40px;

/// @prop - Height of the avatar in the item
$item-md-avatar-height: $item-md-avatar-width;

/// @prop - Size of the thumbnail in the item
$item-md-thumbnail-size: 56px;

/// @prop - Padding top for the item content
$item-md-padding-top: 10px;

/// @prop - Padding end for the item content
$item-md-padding-end: 16px;

/// @prop - Padding bottom for the item content
$item-md-padding-bottom: 11px;

/// @prop - Padding start for the item content
$item-md-padding-start: 16px;

/// @prop - Border bottom width for the item when lines are displayed
$item-md-border-bottom-width: 1px;

/// @prop - Border bottom style for the item when lines are displayed
$item-md-border-bottom-style: solid;

/// @prop - Border bottom color for the item when lines are displayed
$item-md-border-bottom-color: $item-md-border-color;

// Item Label
// --------------------------------------------------

/// @prop - Margin top of the label
$item-md-label-margin-top: 10px;

/// @prop - Margin end of the label
$item-md-label-margin-end: 0;

/// @prop - Margin bottom of the label
$item-md-label-margin-bottom: 10px;

/// @prop - Margin start of the label
$item-md-label-margin-start: 0;

// Item Slots
// --------------------------------------------------

/// @prop - Margin start for the start slot
$item-md-start-slot-margin-start: null;

/// @prop - Margin end for the start slot
$item-md-start-slot-margin-end: 16px;

/// @prop - Margin start for the end slot
$item-md-end-slot-margin-start: 16px;

/// @prop - Margin end for the end slot
$item-md-end-slot-margin-end: null;

/// @prop - Margin top for content in the start/end slot in a multi-line item
$item-md-multi-line-slot-margin-top: 16px;

/// @prop - Margin end for content in the start/end slot in a multi-line item
$item-md-multi-line-slot-margin-end: null;

/// @prop - Margin bottom for content in the start/end slot in a multi-line item
$item-md-multi-line-slot-margin-bottom: 16px;

/// @prop - Margin start for content in the start/end slot in a multi-line item
$item-md-multi-line-slot-margin-start: null;

// Icon Slots
// --------------------------------------------------

/// @prop - Margin top for an icon in the start/end slot
$item-md-icon-slot-margin-top: 12px;

/// @prop - Margin end for an icon in the start/end slot
$item-md-icon-slot-margin-end: null;

/// @prop - Margin bottom for an icon in the start/end slot
$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top;

/// @prop - Margin start for an icon in the start/end slot
$item-md-icon-slot-margin-start: null;

/// @prop - Margin start for an icon in the start slot
$item-md-icon-start-slot-margin-start: null;

/// @prop - Margin end for an icon in the start slot
$item-md-icon-start-slot-margin-end: 32px;

/// @prop - Margin end for an icon in the start slot
$item-md-input-icon-start-slot-margin-end: 8px;

/// @prop - Margin start for an icon in the end slot
$item-md-icon-end-slot-margin-start: 16px;

/// @prop - Margin end for an icon in the end slot
$item-md-icon-end-slot-margin-end: null;

/// @prop - Color for an icon in the start/end slot
$item-md-icon-slot-color: rgba($text-color-rgb, 0.54);

/// @prop - Font size of an icon in the start/end slot
$item-md-icon-slot-font-size: 24px;

// Label Slots
// --------------------------------------------------

/// @prop - Margin top for the end slot inside of a floating/stacked label
$item-md-label-slot-end-margin-top: 7px;

/// @prop - Margin end for the end slot inside of a floating/stacked label
$item-md-label-slot-end-margin-end: null;

/// @prop - Margin bottom for the end slot inside of a floating/stacked label
$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top;

/// @prop - Margin start for the end slot inside of a floating/stacked label
$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end;

// Note Slots
// --------------------------------------------------

/// @prop - Font size of a note in the start/end slot
$item-md-note-slot-font-size: dynamic-font(11px);

/// @prop - Padding top for a note in the start/end slot
$item-md-note-slot-padding-top: 18px;

/// @prop - Padding end for a note in the start/end slot
$item-md-note-slot-padding-end: 0;

/// @prop - Padding bottom for a note in the start/end slot
$item-md-note-slot-padding-bottom: 10px;

/// @prop - Padding start for a note in the start/end slot
$item-md-note-slot-padding-start: $item-md-note-slot-padding-end;

// Avatar/Thumbnail Slots
// --------------------------------------------------

/// @prop - Margin top for an avatar/thumbnail in the start/end slot
$item-md-media-slot-margin-top: 8px;

/// @prop - Margin end for an avatar/thumbnail in the start/end slot
$item-md-media-slot-margin-end: null;

/// @prop - Margin bottom for an avatar/thumbnail in the start/end slot
$item-md-media-slot-margin-bottom: 8px;

/// @prop - Margin start for an avatar/thumbnail in the start/end slot
$item-md-media-slot-margin-start: $item-md-media-slot-margin-end;

/// @prop - Margin start for an avatar/thumbnail in the start slot
$item-md-media-start-slot-margin-start: null;

/// @prop - Margin end for an avatar/thumbnail in the start slot
$item-md-media-start-slot-margin-end: 16px;

/// @prop - Margin start for an avatar/thumbnail in the end slot
$item-md-media-end-slot-margin-start: 16px;

/// @prop - Margin end for an avatar/thumbnail in the end slot
$item-md-media-end-slot-margin-end: null;