svg {
    width: rem(24);
    height: rem(24);
    color: currentColor;
    path {
        fill: currentColor;
    }
}

[hidden] {
    display: none !important;
    visibility: hidden !important;
}

.file-container {
    width: 100%;
    max-width: rem(900);
    margin: rem(16);
    padding: rem(16);
    background-color: white;
    border-radius: rem(4);
    border: var(--border-on-light);
    box-shadow:
        0 rem(3) rem(1) rem(-2) rgba(black, .2),
        0 rem(2) rem(2) rem( 0) rgba(black,.14),
        0 rem(1) rem(5) rem( 0) rgba(black,.12);
}

    .file-input {
        display: flex;
        margin: 0 0 rem(4);
        padding: rem(8) rem(12) rem(3);
        color: var(--primary-text-on-light);
        border: var(--border-on-light);
        border-radius: rem(4);
    &__label {
        margin-left: rem(-4);
        padding: 0 rem(4);
        font-size: rem(14);
        color: var(--secondary-text-on-light);
    }
    &__input {
        align-items: flex-start;
        display: grid;
        grid-template-columns: auto 1fr auto;
        width: 100%;
    }
    &:focus-within {
        border-color: var(--tertiary-dark);
        .file-input__label {
        color: var(--tertiary-dark);
        }
    }
    &__helper {
        margin-left: rem(13);
        font-size: rem(12);
        color: var(--secondary-text-on-light);
    }
    }

    .input {
        position: relative;
        &__left {
            display: flex;
            align-items: center;
            margin-bottom: rem(8);
        }
        &__no-file {
            margin-right: rem(16);
            white-space: nowrap;
        }
        &__choose {
            display: inline-flex;
            align-items: center;
            min-height: rem(34);
            margin-right: rem(16);
            padding: rem(4) rem(16);
            color: var(--primary-text-on-tertiary);
            text-transform: uppercase;
            font-size: rem(14);
            font-weight: 500;
            letter-spacing: rem(1.25);
            background: var(--tertiary);
            border-radius: rem(4);
            white-space: nowrap;
            cursor: pointer;
            &:focus {
            background-color: var(--tertiary-dark);
            box-shadow: 0 0 0 rem(3) rgba(black, 0.2);
            }
        }
        &__remove {
            position: absolute;
            font-size: 0;
            right: 0;
            top: rem(4);
            color: var(--secondary-text-on-light);
            border-radius: 50%;
            &:focus {
            box-shadow: 0 0 0 rem(3) rgba(black, 0.2);
            }
            &:active {
            color: var(--primary-text-on-light);
            }
        }
    }

    .chip {
        display: inline-flex;
        justify-content: space-between;
        height: rem(32);
        margin-right: rem(8);
        margin-bottom: rem(8);
        padding: 0 rem(4) 0 rem(12);
        align-items: center;
        background-color: #fafafa;
        border: var(--border-on-light);
        border-radius: rem(17);
        white-space: nowrap;
        &__container {
            padding-right: rem(24);
        }
        &__text {
            display: inline-block;
            margin-right: rem(8);
            font-size: rem(14);
        }
    }