ボタン09

$BLOCK_NAME: '.button-09';

// 変数
$color_text_primary: #989898;
$color_border_primary: #d5d5d5;
$color_hover: #171e27;
$transition_border: 0.3s;

#{ $BLOCK_NAME } {
  position: relative;
  display: inline-block;
  padding-right: 8.5em;
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  color: $color_text_primary;
  transition: color 0s ease 0.1s;
  &::before,
  &::after {
    position: absolute;
    top: 0;
    right: 2.5em;
    bottom: 0;
    display: block;
    width: 4.5em;
    height: 1px;
    margin: auto 0;
    content: '';
  }
  &::before {
    background: $color_border_primary;
  }
  &::after {
    background: $color_hover;
    transition: transform $transition_border;
    transform: scale(0.1, 1);
    transform-origin: left;
  }
  &:hover {
    color: $color_hover;
    &::after {
      transform: scale(1);
    }
  }
}