/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Footer component */
@layer components {
  .perforated-footer {
    margin-top: var(--space-xl);
    padding-top: var(--space-l);
    text-align: center;
    border-top: 1px dashed var(--color-on-surface);
    position: relative;

    & .perforated-footer__line {
      position: absolute;
      top: -10px;
      left: var(--space-m);
      background: var(--color-surface);
      padding-inline: 5px;
    }

    & .perforated-footer__scissors {
      font-size: 20px;
      transform: scaleX(-1);
      display: inline-block;
    }

    & .perforated-footer__actions {
      margin-bottom: var(--space-s);
      justify-content: center;
    }

    & .perforated-footer__note {
      font-size: var(--size-step--2);
      opacity: 0.6;
      font-style: italic;
    }
  }
}