.form-managed-file {
  > label {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition-timing-function: linear;
    transition-duration: 200ms;
    transition-property: all;
    color: var(--color-ocean-300);
    border: 1px solid;
    border-radius: 0.5rem;
    background-color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    gap: 0.5rem;
    inline-size: 100%;

    @media (min-width: 768px) {
      inline-size: fit-content;
      min-inline-size: 204px;
    }

    &:hover {
      --tw-inset-ring-shadow: inset 0 0 0 1px
        var(--tw-inset-ring-color, currentColor);

      box-shadow:
        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  button[name$="remove_button"],
  input[name$="remove_button"],
  div[data-component-id="enea:checkbox"] {
    display: none;
  }
}

.form-managed-file-with-icon > label {
  padding-block: 0.75rem;

  &::before {
    display: inline-block;
    content: var(--tw-content);
    vertical-align: middle;
    color: var(--color-ocean-300);
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }
}
