/*.....................................................................
	attr.css
	version v1
	copylight petarna co.,ltd.
	date 2017.11.01
.....................................................................*/

/*
  font
=======================================================================*/
*[data-attr~="font-kaku-gothic"], *[data-attr~="font-kaku-gothic"] * {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

*[data-attr~="font-maru-gothic"], *[data-attr~="font-maru-gothic"] * {
	font-family:"Lucida Grande","segoe UI","ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN",Meiryo,Arial,sans-serif;
}

*[data-attr~="font-mincho"], *[data-attr~="font-mincho"] * {
	font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
}

/*
  
=======================================================================*/

/* 継承(inherit) 子要素の偶数(even)|奇数(odd) */
[data-attr*=".inherit-even"] > *:nth-child(2n+1),
[data-attr*=".inherit-odd"] > *:nth-child(2n){
  color: inherit;
  background: inherit;
  font: inherit;
  border: inherit;
}

/*
  space  
=======================================================================*/
[data-attr~="space-side-1"] { margin-left: 1rem; margin-right: 1rem; }
[data-attr~="space-side-5"] { margin-left: 5rem; margin-right: 5rem; }
[data-attr~="space-side-10"] { margin-left: 10rem; margin-right: 10rem; }

[data-attr~="space-left-1"] { margin-left: 1rem; }
[data-attr~="space-left-5"] { margin-left: 5rem; }
[data-attr~="space-left-10"] { margin-left: 10rem; }

[data-attr~="space-right-1"] { margin-right: 1rem; }
[data-attr~="space-right-5"] { margin-right: 5rem; }
[data-attr~="space-right-10"] { margin-right: 10rem; }

/*
  color  
=======================================================================*/

/* primary */
[data-attr~="primary"],
[data-attr~="primary:before"]::before,
[data-attr~="primary:after"]::after {
  background-color: #99aefd;
  color: #323232;
  transition: all .3s ease-in-out;
}

[data-attr~="primary:hover"]:hover {
  background-color: #5366aa;
  color: #fff;
}

/* success */
[data-attr~="success"],
[data-attr~="success:before"]::before,
[data-attr~="success:after"]::after {
  background-color: #5db75c;
  color: #323232; 
  transition: all .3s ease-in-out;
}

[data-attr~="success:hover"]:hover {
  background-color: #2a9d28;
  color: #fff;
}

/* infomation */
[data-attr~="info"],
[data-attr~="info:before"]::before,
[data-attr~="info:after"]::after {
  background-color: #5bc0dd;
  color: #323232;
  transition: all .3s ease-in-out;
}

[data-attr~="info:hover"]:hover {
  background-color: #287b93;
  color: #fff;
}

/* warning */
[data-attr~="warning"],
[data-attr~="warning:before"]::before,
[data-attr~="warning:after"]::after {
  background-color: #f0ad4e;
  color: #323232;
  transition: all .3s ease-in-out;
}

[data-attr~="warning:hover"]:hover {
  background-color: #a2712c;
  color: #fff;
}

/* danger */
[data-attr~="danger"],
[data-attr~="danger:before"]::before,
[data-attr~="danger:after"]::after {
  background-color: #ef827f;
  color: #323232;
  transition: all .3s ease-in-out;
}

[data-attr~="danger:hover"]:hover {
  background-color: #a9504c;
  color: #fff;
}