ボタン26

$BLOCK_NAME: '.button-26';

// 変数
$color_primary: #242427;
$color_white: #fff;
$duration_default: 0.5s;

#{ $BLOCK_NAME } {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 244px;
  height: 50px;
  overflow: hidden;
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  color: $color_primary;
  border: 1px solid $color_primary;
  border-radius: 9999px;

  &::before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    display: block;
    content: '';
    background: $color_primary;
    border-radius: 9999px;
    transition: all $duration_default;
    transform: translateX(-100%);
  }

  & > span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 0 2px 24px;
    transition: all $duration_default;
    &::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      display: block;
      width: 6px;
      height: 6px;
      margin: auto;
      content: '';
      border-top: 1px solid $color_primary;
      border-right: 1px solid $color_primary;
      transition: all $duration_default;
      transform: rotate(45deg);
    }
  }

  &:hover {
    &::before {
      transform: translateX(0);
    }

    & > span {
      color: $color_white;
      &::before {
        border-color: $color_white;
      }
    }
  }
}