/*************************
 *  border_gradient.css  *
 *************************/

:root {
/*** 色指定変数 ***/
  --color: white;
  --background: white;
  --innerBackground: black;
  --c1: red;
  --c2: yellow;
  --c3: cyan;

/*** サイズ指定変数 ***/
  --outerWidth: 230px;
  --outerHeight: 65px;
  --outerRadius: 10px;
  --borderWidth: 4px;
  --fontSize: 23px;
  --outerCircleSize: 22px;
  --innerCircleSize: calc( var(--outerCircleSize) - var(--borderWidth) * 2 );

/*** 位置指定変数 ***/
  --circleTop: calc( (var(--outerHeight) - var(--outerCircleSize)) / 2 );
  --partsSidePosition: calc( var(--outerCircleSize) / -2 );
  
/*** アニメーション用変数 ***/
  --backSize: 115;
  --animationTime: 10;
}
 
#borderGradient { 
  background: var(--background);
  width:  var(--outerWidth);
  height: var(--outerHeight);
}

#borderGradient a{
  display: inline-block;
  text-align: center;
  width:  var(--outerWidth);
  height: var(--outerHeight);
  color: var(--color);
  font-size: var(--fontSize);
  padding:0;
}

#borderGradient * { box-sizing: border-box;}


/*** ボーダーになる要素 ***/
#borderGradient .outer {
  width: var(--outerWidth);
  height: var(--outerHeight);
  margin:0;
  padding: var(--borderWidth);
  position: relative;
  transition: all 300ms cubic-bezier(0.03, 0.98, 0.53, 0.99) 0s;
  background: linear-gradient(
    to right,var(--c1),var(--c2),var(--c3) );
  border-radius: var(--outerRadius);
  background-size: calc( var(--backSize) * 1% );
  animation:test calc( var(--animationTime) * 1s ) ease infinite;
}
@keyframes test{
  0%{background-position:0% 100%;}
  50%{background-position:100% 0%;}
  100%{background-position:0% 100%;}
}


/*** 内側の要素 ***/
#borderGradient .inner {
  /*display: flex;
  justify-content: center;
  align-items: center;
  background: var(--innerBackground);
  border-radius: calc( var(--outerRadius) - var(--borderWidth) );
  */
  width: 100%;
  height: 100%;
  position: relative;

}


/*** 外側のサークル ***/
.outer:before, .outer:after {
  content: "";
  display: block;
  position: absolute;
  top: var(--circleTop);
  width: var(--outerCircleSize);
  height: var(--outerCircleSize);
  border-radius: 50%;
  z-index: 2;
}
.outer:before {
  left: var(--partsSidePosition);
  background: var(--c1);
}
.outer:after {
  right: var(--partsSidePosition);
  background: var(--c3);
}


/*** 内側のサークル ***/
.inner:before, .inner:after {
  content: "";
  display: block;
  position: absolute;
  top: var(--circleTop);
  width: var(--innerCircleSize);
  height: var(--innerCircleSize);
  border-radius: 50%;
  background: var(--background);
  z-index: 3;
}
.inner:before { left: var(--partsSidePosition);}
.inner:after { right: var(--partsSidePosition);}


/*** はみ出したサークルのカバー ***/
.left, .right {
  position: absolute;
  top: var(--circleTop);
  width: calc( var(--outerCircleSize) / 2 );
  height: var(--outerCircleSize);
  background: var(--background);
  z-index: 4;
}
.left { left: var(--partsSidePosition);}
.right{  right:  var(--partsSidePosition);}

/*** マウスオン時の背景の色と文字の色 ***/
#borderGradient a:hover{ background: white;}
#borderGradient a:hover .inner{
/*
  background: inherit;
  color: black;
*/}