/*
 * Reusable SVG icons via CSS masks. Each .icon-* class defines the shape via
 * mask-image (using an inline data URL), then the color is supplied by
 * background-color — defaulting to currentColor so the icon follows the
 * surrounding text color (including hover states).
 *
 * Usage:  <span class="icon icon-close" aria-hidden="true"></span>
 *
 * To add a new icon: paste the SVG path(s) into a new .icon-<name> rule as a
 * data URL. Only the shape matters — strip fills from the SVG since color
 * comes from background-color.
 */

.icon {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    flex-shrink: 0;
}

.icon-close {
    width: 13px;
    height: 13px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path d='M0.708 12.616L0 11.908L5.6 6.308L0 0.708L0.708 0L6.308 5.6L11.908 0L12.616 0.708L7.016 6.308L12.616 11.908L11.908 12.616L6.308 7.016L0.708 12.616Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path d='M0.708 12.616L0 11.908L5.6 6.308L0 0.708L0.708 0L6.308 5.6L11.908 0L12.616 0.708L7.016 6.308L12.616 11.908L11.908 12.616L6.308 7.016L0.708 12.616Z'/></svg>");
}

.icon-mail-envelope {
    width: 95px;
    height: 64px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95 64' fill='none'><path d='M89.7921 4.21231L48.9411 37.9478C48.239 38.5255 47.0196 38.5255 46.3176 37.9478L4.84762 4.21231M55.1769 32.786L89.7829 60.6496M4.83838 61L39.8324 32.6345M90.1709 60.9905C91.2979 60.2423 92 58.9543 92 57.562V7.07243C92 4.82782 90.2171 3 88.0276 3H6.97238C4.78295 3 3 4.82782 3 7.07243V57.562C3 58.9732 3.7021 60.2518 4.84762 61' stroke='black' stroke-width='6' stroke-miterlimit='10'/><path d='M90.1709 60.9905C91.2979 60.2423 92 58.9543 92 57.562V7.07243C92 4.82782 90.2171 3 88.0276 3H6.97238C4.78295 3 3 4.82782 3 7.07243V57.562C3 58.9732 3.7021 60.2518 4.84762 61H90.1709V60.9905Z' stroke='black' stroke-width='4' stroke-miterlimit='10'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95 64' fill='none'><path d='M89.7921 4.21231L48.9411 37.9478C48.239 38.5255 47.0196 38.5255 46.3176 37.9478L4.84762 4.21231M55.1769 32.786L89.7829 60.6496M4.83838 61L39.8324 32.6345M90.1709 60.9905C91.2979 60.2423 92 58.9543 92 57.562V7.07243C92 4.82782 90.2171 3 88.0276 3H6.97238C4.78295 3 3 4.82782 3 7.07243V57.562C3 58.9732 3.7021 60.2518 4.84762 61' stroke='black' stroke-width='6' stroke-miterlimit='10'/><path d='M90.1709 60.9905C91.2979 60.2423 92 58.9543 92 57.562V7.07243C92 4.82782 90.2171 3 88.0276 3H6.97238C4.78295 3 3 4.82782 3 7.07243V57.562C3 58.9732 3.7021 60.2518 4.84762 61H90.1709V60.9905Z' stroke='black' stroke-width='4' stroke-miterlimit='10'/></svg>");
}

/* Ansökan radio button — replaces the long Tailwind class string repeated
 * across every yes/no choice in the application form. */
.ansokan-radio {
    height: 24px;
    width: 24px;
    border-radius: 9999px;
    -webkit-appearance: none;
            appearance: none;
    border: 1px solid #A0A0A0;
    cursor: pointer;
}
.ansokan-radio:hover {
    background: radial-gradient(circle, #C8D6D1 45%, transparent 47%);
}
.ansokan-radio:checked {
    border-color: #000000;
    background: radial-gradient(circle, #1C3A34 45%, transparent 47%);
}