@utility shadow-side {
  box-shadow: var(--shadow-right, 0 0 0 transparent),
    var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent),
    var(--shadow-bottom, 0 0 0 transparent);
}

@utility shadow-r-* {
  --shadow-right: calc(--value(number) * 1px) 0 calc(--value(number) * 1px) 0
    var(--tw-shadow-color, rgb(0 0 0 / 2%));
}

@utility shadow-l-* {
  --shadow-left: calc(--value(number) * -1px) 0 calc(--value(number) * 1px) 0
    var(--tw-shadow-color, rgb(0 0 0 / 2%));
}

@utility shadow-t-* {
  --shadow-top: 0 calc(--value(number) * -1px) calc(--value(number) * 1px) 0
    var(--tw-shadow-color, rgb(0 0 0 / 2%));
}

@utility shadow-b-* {
  --shadow-bottom: 0 calc(--value(number) * 1px) calc(--value(number) * 1px) 0
    var(--tw-shadow-color, rgb(0 0 0 / 2%));
}

@utility shadow-around-* {
  --shadow-right: calc(--value(number) * 1px) 0 calc(--value(number) * 1px) 0
    var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-left: calc(--value(number) * -1px) 0 calc(--value(number) * 1px) 0
    var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-top: 0 calc(--value(number) * -1px) calc(--value(number) * 1px) 0
    var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-bottom: 0 calc(--value(number) * 1px) calc(--value(number) * 1px) 0
    var(--tw-shadow-color, rgb(0 0 0 / 2%));
  @apply shadow-side;
}

@utility shadow-strong {
  --tw-shadow-color: rgba(0, 0, 0, 0.05);
}

@utility shadow-hard {
  --tw-shadow-color: rgba(0, 0, 0, 0.1);
}

@utility shadow-around {
  --shadow-right: 2px 0 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-left: -2px 0 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-top: 0 -2px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-bottom: 0 2px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  @apply shadow-side;
}

@utility shadow-around-md {
  --shadow-right: 5px 0 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-left: -5px 0 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-top: 0 -5px 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-bottom: 0 5px 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  @apply shadow-side;
}

@utility shadow-around-lg {
  --shadow-right: 10px 0 10px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-left: -10px 0 10px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-top: 0 -10px 10px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-bottom: 0 10px 10px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  @apply shadow-side;
}

@utility shadow-around-xl {
  --shadow-right: 20px 0 20px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-left: -20px 0 20px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-top: 0 -20px 20px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  --shadow-bottom: 0 20px 20px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
  @apply shadow-side;
}