/*======*/
/* Font */
/*======*/
@font-face {
  font-family: 'shap';
  src: url('./shap.woff2') format('woff2'); 
}

div.shap {
  font-family: 'shap';  /* Direction */
}


/*=======*/
/* Color */
/*=======*/
div.shap {
  border: 1px solid darkgray;
}

div.ctrl > div.play,
div.ctrl > div.pause {
  color: ivory;
  background-color: darkgray;
}

div.ctrl > div.play:hover,
div.ctrl > div.pause:hover {
  background-color: dodgerblue !important;
}

div.shap > div.info {
  color: cornflowerblue;
}

div.info > span.minus,
div.info > span.plus {
  color: darkgray;
}

div.info > span.volume {
  background-color: darkgray;
}

div.info> span.volume::before {
  border-right: 0.8em solid darkgray;
}

span.volume > span.volume3,
span.volume > span.volume3::before,
span.volume > span.volume3::after {
  border-right: 0.1em solid darkgray;
}


/*=================*/
/* shap appearance */
/*=================*/
audio {
  display: none;
}


div.shap {
  position: relative;
  padding: 1em 0;
  margin-top: 1em;
  height: 20px;
  border-radius: 5px; /* safari */
  font-size: 20px;
}


/* Set margin for shap by according to figcaption */
figcaption + div.shap,
div.shap + figcaption {
  margin: .1em 0 2em;
}


/*===================*/
/* Button appearance */
/*===================*/
div.shap > div.ctrl {
  position: absolute;
  top: 4px;
}

div.ctrl > div.play,
div.ctrl > div.pause {
  font-size: 21px;
  width: 2em; /* font-size * 2 */
  line-height: 2em; /* font-size * 2 */
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  top: 3px;
  z-index: 1;
}

div.ctrl > div.play {
  position: absolute;
  left: 1em;
  top: .25em;
}

div.ctrl > div.pause {
  position: absolute;
  left: 4em;
  top: .25em;
}


/*=================*/
/* Info appearance */
/*=================*/
div.shap > div.info {
  display: inline-block;
  font-size: 1.1em;
  padding: .1em 0 0 1em;
}

div.info > span.current,
div.info > span.duration {
  position: absolute;
  top: 7px;
}

div.info > span.current {
  left: 151px;
}

div.info > span.duration {
  right: 177px;
}

div.info > span.minus,
div.info > span.plus {
  position: absolute;
  top: 1px;
  font-size: 1.2em;
}

div.info > span.minus {
  right: 100px;
}

div.info > span.plus {
  right: 20px;
}


/*=============*/
/* Volume icon */
/*=============*/
div.info > span.volume {
  position: absolute;
  font-size: 1em;
  top: 38px;
  right: 144px;
  width: 0.4em;
  height: 0.4em;
  border-radius: 2px;
}

div.info> span.volume::before {
  content: "";
  position: absolute;
  top: -0.3em;
  left: 0;
  width: 0;
  height: 0;
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
  border-radius: 3px;
}

span.volume > span.volume3 {
  position: absolute;
  top: 0;
  left: 0.4em;
  width: 0.4em;
  height: 0.2em;
  border-top: 0.1em solid transparent;
  border-left: 0.1em solid transparent;
  border-bottom: 0.1em solid transparent;
  border-radius: 100%;
}

span.volume > span.volume3::before {
  content: "";
  position: absolute;
  top: -0.3em;
  left: 0.1em;
  width: 0.4em;
  height: 0.6em;
  border-top: 0.1em solid transparent;
  border-left: 0.1em solid transparent;
  border-bottom: 0.1em solid transparent;
  border-radius: 100%;
}

span.volume > span.volume3::after {
  content: "";
  position: absolute;
  top: -0.5em;
  left: 0.1em;
  width: 0.6em;
  height: 1em;
  border-top: 0.1em solid transparent;
  border-left: 0.1em solid transparent;
  border-bottom: 0.1em solid transparent;
  border-radius: 100%;
}


/*====================*/
/* Seekbar appearance */
/*====================*/
div.shap > input.seekbar {
  position: absolute;
  top: 34px;
  left: 150px;
  width: calc(100% - 330px);
}

input.seekbar[type="range"] {
  -webkit-appearance: none;
  overflow: hidden;
  width: 50%;
  height:14px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  background: lightgray;
}


/* for webkit */
input.seekbar[type="range"]::-webkit-slider-runnable-track {
  background: lightgray;
}

input.seekbar[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height:14px;
  background: gray;
  box-shadow: -100vw 0 0 99vw dodgerblue;
  border: solid dimgray;
  border-width: 0px 7px 0 3px;
  border-radius: 2px;
}

input.seekbar[type="range"]::-webkit-slider-thumb:hover {
  background: darkgray;
  border-color: gray;
}

/* for moz */
input.seekbar[type="range"]::-moz-range-track {
  background: lightgray;
}

input.seekbar[type="range"]::-moz-range-thumb {
  width: 30px;
  height: 14px;
  background: gray;
  border-radius: 0 !important;
  box-shadow: -100vw 0 0 100vw dodgerblue;
  box-sizing: border-box;
  border: solid dimgray;
  border-width: 0px 7px 0px 3px;
}

input.seekbar[type="range"]::-moz-range-thumb:hover {
  background: darkgray;
  border-color: gray;
}


/* for ms */
input.seekbar[type="range"]::-ms-track {
  background: lightgray;
  color: transparent;
  border: none;
}

input.seekbar[type="range"]::-ms-ticks-after,
input.seekbar[type="range"]::-ms-ticks-before {
  display: none;
}

input.seekbar[type="range"]::-ms-fill-lower {
  background: dodgerblue;
}

input.seekbar[type="range"]::-ms-thumb {
  background: gray;
  border: solid gray;
  width: 30px;
  height:14px;
  box-sizing: border-box;
}

input.seekbar[type="range"]::-ms-tooltip {
  display: none;
}


/*===================*/
/* Volume appearance */
/*===================*/
div.shap > input.volumebar {
  position: absolute;
  top: 34px;
  right: 20px;
  width: 90px;
}

input.volumebar[type="range"] {
  -webkit-appearance: none;
  overflow: hidden;
  width: 50%;
  height: 14px;
  border: none;
  cursor: pointer;
  background: linear-gradient(transparent 40%, lightgray 0, lightgray 60%, transparent 0);
  /*background: linear-gradient(171deg, transparent 50%, lightgray 0);*/
}

/* for webkit */
input.volumebar[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  overflow: visible;
  width: 20px;
  height:14px;
  background: gray;
  border: solid dimgray;
  border-width: 0px 7px 0 3px;
  border-radius: 2px;
}

input.volumebar[type="range"]::-webkit-slider-thumb:hover {
  background: darkgray;
  border-color: gray;
}


/* for moz */
input.volumebar[type="range"]::-moz-range-track {
  background: lightgray;
}

input.volumebar[type="range"]::-moz-range-thumb {
  width: 25px;
  height: 14px;
  background: gray;
  border-radius: 0 !important;
  box-sizing: border-box;
  border: solid dimgray;
  border-width: 0px 7px 0px 3px;
}

input.volumebar[type="range"]::-moz-range-thumb:hover {
  background: darkgray;
  border-color: gray;
}

/* Share setting type range */
input[type="range"]:focus,
input[type="range"]:active {
  outline: none;
}

/* for ms */
input.volumebar[type="range"]::-ms-track {
  background: lightgray;
  color: transparent;
  border: none;
}

input.volumebar[type="range"]::-ms-ticks-after,
input.volumebar[type="range"]::-ms-ticks-before {
  display: none;
}

input.volumebar[type="range"]::-ms-fill-lower {
  background: transparent;
}

input.volumebar[type="range"]::-ms-thumb {
  background: gray;
  border: solid gray;
  width: 25px;
  height:14px;
  box-sizing: border-box;
}

input.volumebar[type="range"]::-ms-tooltip {
  display: none;
}


/*========*/
/* Figure */
/*========*/
div.shap > figcaption {
  font-size: .9em; 
  letter-spacing: .06em;
  line-height:1.9em;
  clear: both;
}


/*============*/
/* Mediaquery */
/*============*/
@media screen and (max-width: 850px) {
  div.shap > input.volumebar,
  div.info > span.minus,
  div.info > span.plus, 
  div.info > span.volume,
  span.volume > span.volume3 {
    display: none;
  }

  div.shap {
    height: 12px;
  }

  div.ctrl > div.play,
  div.ctrl > div.pause {
    font-size: 18px;
    width: 2em;
    line-height: 2m;
    top: 4px;
  }

  div.ctrl > div.play {
    left: 12px;
  }

  div.ctrl > div.pause {
    left: 62px;
  }

  div.info > span.current {
    font-size: .8em;
    top: 5px;
    left: 114px;
  }

  div.info > span.duration {
    font-size: .8em;
    top: 5px;
    right: 14px;
  }

  div.shap > input.seekbar {
    top: 25px;
    left: 113px;
    width: calc(100% - 130px);
  }

  div.shap > input.seekbar[type="range"] {
    height: 15px;
  }
  div.shap > input.seekbar[type="range"]::-webkit-slider-thumb {
    height: 15px;
  }
  div.shap > input.seekbar[type="range"]::-moz-range-thumb {
    height: 15px;
  }
  div.shap > input.seekbar[type="range"]::-ms-thumb {
    height: 15px;
  }
}
