/* --- Promotional Video
-------------------------------------------------------- */
.wp-block-section.promotional-video {
  .wp-block-kelsey-pro-popup-video a.video-play {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 2px solid var(--wp--preset--color--color-light);
    border-radius: 100%;
    text-align: center;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    position: relative;
    > svg {
      display: none;
    }

    > span {
      letter-spacing: 0.1875em;
      padding-left: 0;
      font-weight:  var(--wp--custom--typography--font-weight--bold);
      font-size: var(--wp--preset--font-size--medium);
    }

    &:before,
    &:after {
      box-sizing: inherit;
      content: "";
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      border-radius: 100%;
      border-width: 2px;
      border-style: solid;
      border-color: transparent;
      position: absolute;
      top: -2px;
      left: -2px;
    }
    &:before {
      border-width: 2px;
      border-style: solid;
      border-color: transparent;
    }
    &:after {
      bottom: -2px;
      right: -2px;
    }
    &:hover:before,
    &:focus:before {
      border-top-color: var(--wp--preset--color--text-link);
      border-right-color: var(--wp--preset--color--text-link);
      border-bottom-color: var(--wp--preset--color--text-link);
      border-left: 2px solid var(--wp--preset--color--text-link);
      transform: rotate(270deg);
      transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
    }
    &:hover:after,
    &:focus:after {
      border-top: 2px solid var(--wp--preset--color--text-link);
      border-left-width: 2px;
      border-right-width: 2px;
      transform: rotate(270deg);
      transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
    }
  }
}
