ボタン43

$BLOCK_NAME: '.button-43';

// 変数
$color_primary: #ce009f;
$color_secondary: #edeae7;
$color_secondary_light: #f5f4f3;
$color_white: #fff;
$color_black: #1a1a1a;
$shadow_default: 8px 13px 15px rgba(141, 135, 132, 0.18);
$shadow_hover: 0 7px 15px rgba(95, 20, 78, 0.3);
$duration_default: 0.5s;

#{ $BLOCK_NAME } {
  position: relative;
  display: block;
  width: 274px;
  height: 74px;
  overflow: hidden;
  line-height: 74px;
  color: $color_black;
  text-align: center;
  letter-spacing: 1px;
  background-color: $color_white;
  box-shadow: $shadow_default;
  transition: box-shadow $duration_default, color $duration_default;
  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 10px;
    height: 10px;
    margin: auto;
    content: '';
    background: $color_primary;
    border-radius: 50%;
    transition: transform $duration_default;
    transform: scale(0);
  }
  &:hover {
    color: $color_white;
    box-shadow: $shadow_hover;
    &::before {
      transform: scale(30);
    }
  }

  & > span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 12px;
    transition: transform $duration_default;
    transform: translateX(-16px);
    &::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 100%;
      display: block;
      width: 32px;
      height: 1px;
      margin: auto;
      content: '';
      background: $color_black;
      transition: opacity $duration_default;
    }
    @at-root #{ $BLOCK_NAME }:hover > span {
      transform: translateX(0);
      &::before {
        opacity: 0;
      }
    }
  }
}